Currently trying to display my img full length, when the browser(chrome latest) width is 400px there is some space under the img:
When I make the browserwidth 470px there is no issue. How can I fix this for the mobile view for 400px?
This is the relevant fragment:
<div class="visible-xs">
<div class="col-xs-12 employee">
<div class="col-xs-4"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bertboerland/128.jpg" alt=""></div>
<div class="col-xs-8">
<div><span class="name"> Isabelle Clarke</span></div>
<div>International Group Engineer</div>
<div>39</div>
<div>10/07/2016</div>
<div>Vel velit repellat dicta. Maxime occaecati sed dolorum et modi. Voluptates rerum</div>
</div>
</div>
</div>
This solution will make the image full height but stretched. You can add flex display and use height:100% like this :
#media all and (max-width:470px) {
.employee {
display:flex;
}
.employee img {
height:100%;
}
}
Related
How can I place an image that goes from end of .col-md-4 to the end of the screen?
Here is what I have to do by design - red lines are .container boundaries, text is aligned to the left, and on the right is an image (or slider). I can't do .col-md-8 since the image needs to go as far as the screen is wide.
Can I combine .container and .container fluid somehow? What would you suggest? Image must be visible full width across all desktop sizes.
I currently did this with position absolute but this way the image is cut out and this is not desirable. https://codepen.io/ivan-topi/pen/pGYYjj
If I remove position: relative from .row and place it on .content then I can position image nicely with right: 0 to the end of the screen, but in that case I am not sure how can I position it without overlapping text on the left?
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="img-wrapper">
<img src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
.img-wrapper {
left: 435px;
position: absolute;
width: 100%;
height: 450px;
overflow: hidden;
}
img {
width: 100%;
}
You can consider negative margin while using col-md-8. The trick is to add the amount space on the right as a negative margin to the container inside col-md-8 to create the overflow you want:
.content {
overflow: hidden;
height: 450px;
position: relative;
}
.row {
position: relative;
}
p {
font-size: 20px;
}
img {
width:100%;
}
#media (min-width: 768px) {
.negative {
margin-right: calc((720px - 100vw)/2 - 15px);
}
}
#media (min-width: 992px) {
.negative {
margin-right: calc((960px - 100vw)/2 - 15px);
}
}
#media (min-width: 1200px) {
.negative {
margin-right: calc((1140px - 100vw)/2 - 15px);
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8">
<div class="negative">
<img src="https://via.placeholder.com/1300x450" class="d-block">
</div>
</div>
</div>
</div>
</div>
If i understand you, you need this:
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-4 p-0 d-flex align-items-center">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id odio assumenda nobis recusandae voluptates itaque possimus provident libero et earum.</p>
</div>
<div class="col-md-8 p-0">
<img class="img-fluid" src="https://via.placeholder.com/1300x450">
</div>
</div>
</div>
</div>
And from .img-wrapper remove position:absolute and left: 435px;
Check it here: https://codepen.io/gionic/pen/QYoPqq
I hope it helps you.
I'm using the Bulma navbar, and the function of it is really great! My question is: on smaller screens, when the navbar-menu is shown as a dropdown via clicking the burger menu - how can I style that?
It shows up as full-width, but I'd really like to be able to have it narrower, or maybe adjust to the width of the contents.
Here's how it looks currently:
Closed:
Open:
For the burger menu dropdown, all of the examples on the Bulma page seem to reach the full width of the Navbar. (Though not so for dropdowns within the navbar).
Does anyone know how I can make it not full-width? I mean, I can easily add max-width: 50%; etc on the .navbar-menu, but I don't know how to then make the menu div 'stick' to the right-hand side of the navbar, since it doesn't look very nice aligned to the left:
I feel like I'm missing the obvious here, if anyone can put me on the right path I'd appreciate it so much!
code stuff
My HTML looks basically exactly like the Bulma docs, but I'll add it here just in case:
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
And just to be clear, because it's a common question, I don't have any problems with the functionality of the navbar - just wanting styling advice.
Update
Below, #sol wrote about adding max-width: 50%; and float: right; as a solution. Visually though, it isn't quite right:
Closed (looking normal):
Open (uh oh alignment):
You can create this layout by applying some flexbox properties to .navbar-menu and its container.
You'll need to wrap these rules in a media query to ensure it doesn't affect the menu at larger screen sizes.
fiddle
#media screen and (max-width: 1023px) {
.navbar {
display: flex;
flex-wrap: wrap;
}
.navbar-brand {
min-width: 100%;
}
.navbar-menu {
margin-left: auto;
min-width: 50%;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<nav class="navbar" role="navigation">
<div class="navbar-brand">
<div class="navbar-item">
<p class="title"><span>title here</span></p>
</div>
<div class="button navbar-burger is-active">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu is-active">
<div class="navbar-end">
<div class="navbar-item">
<div>menu item 1</div>
</div>
<div class="navbar-item">
<div>menu item 2</div>
</div>
</div>
</div>
</nav>
<div class="section content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, provident quasi nulla fugiat libero nemo tempora adipisci quisquam voluptatibus blanditiis suscipit cupiditate obcaecati numquam, odio eligendi repellendus! Commodi, mollitia, modi!</p>
</div>
You can try the styling below:
.navbar {
position:relative;
}
.navbar-end {
position:absolute;
left:50%;
}
.navbar-menu {
max-width:50%;
}
This way ".navbar" will be positioned relative to its current position which will allow ".navbar-end" to be positioned in relation to ".navbar" as one of its descending children elements ("position:absolute" positions the element in relation to its nearest positioned ancestor). You may have to tweak the left % if it doesn't fit exactly and also specify either top or bottom offsets if the menu items get displaced vertically.
https://jsfiddle.net/537wen91/
I am using Bootstrap, and in the example, if you make html view wide, scrollbars disappear, when the view is narrow scrollbars show up. That is what I want. The problem starts when I am in the "narrow view": scroll down to the gray box, now expand html view, see how scrollbars are gone (good), but I also lost my text at the top (not good). Why is my text at the top gone?
Edited to clarify
This way it works: On page load - don't scroll anywhere and stretch the screen so that you see all colored columns on one row. You see some text at top, columns at the bottom, no scrollbar. This is how it should be.
This way it doesn't: Refresh page. Scroll down to the pink column. Now stretch it so that all colored columns appear on one row. See that my text at the top is gone? Why?
If this is still not clear, I would have to make a screen recording...
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<h2>title</h2>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et ultrices neque, vel vestibulum turpis. In ex nunc, vulputate at quam vitae, ultrices vestibulum velit. Phasellus lorem orci, maximus vitae tristique a, sollicitudin sed mauris. Donec ipsum nibh, pulvinar quis nulla at, cursus congue odio. Cras accumsan sem erat, volutpat elementum ante accumsan sed.</p>
</div>
<div class="col-md-4">
<h2>title</h2>
<p>bbb</p>
</div>
<div class="col-md-2">
<h2>title</h2>
<p>bbb</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h2>title</h2>
</div>
</div>
<div id="see" class="row">
<div class="col-md-2" style="background-color: #FFC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #CCC;">...</div>
<div class="col-md-2" style="background-color: #FC9;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
<div class="col-md-2" style="background-color: #CCF;">...</div>
</div>
</div>
<nav class="navbar navbar-fixed-bottom">
<p>Place sticky footer content here.</p>
</nav>
CSS
html {
/*position: relative;
min-height: 100%;*/
height: 100%;
}
body {
overflow: hidden;
}
#see > div {
height: 1200px;
}
.navbar {
margin-bottom: 0;
min-height: inherit;
}
nav {
background-color: #222;
color: #666;
}
#media (max-width: 992px) {
body {
overflow: auto;
}
#see > div {
height: 500px;
}
}
JS
$(window).bind('resize load', function () {
if ($(this).width() <= 992) {
$('nav').removeClass('navbar-fixed-bottom');
} else {
$('nav').addClass('navbar-fixed-bottom');
}
});
As mentioned above, the issue is that #see div changes width but not height, and as the page was scrolled, the scrolling remains, leaving the text out of the viewport. Something like this (excuse my poor MSPaint skills):
One possible solution for that would be to scroll to the top of the page right before that change is made, so the text is always visible. You can achieve that just by adding a line of code:
$(window).scrollTop(0);
You can see it working here: https://jsfiddle.net/537wen91/12/
One possible CSS-only solution would be to, if the text height is constant, for the #see div add a height of calc(100% - HEIGHT_OF_TEXT). But I haven't tried this.
Try replacing:
body { overflow: hidden; }
with
body { overflow: auto; }
More info on Overflow values: http://www.w3schools.com/cssref/pr_pos_overflow.asp
You may have to define what happens in different view sizes, using Bootstrap's grid layout: http://getbootstrap.com/css/#grid
In your class, define grid sizes for these:
.col-xs- .col-sm- .col-md- .col-lg-
Add hidden-xs to your class to hide in extra-small, or hidden-md in medium views, and so on (in the Fiddle below, if you make the width of the result window narrow enough, you will see this happen,
When you go to a smaller screen size, let's say you want to display two "title" elements instead of four, you would change your HTML to this:
<div class="row">
<div class="hidden-xs col-md-2">
<div class="col-xs-6 col-md-4">
<div class="col-xs-6 col-md-4">
<div class="hidden-xs col-md-2">
</div>
This makes it so that on smaller screens, the only middle two elements will display as they will take up all 12 columns of the grid. Or you could make it so that on smaller views. Here is a Fiddle: https://jsfiddle.net/1dtnd59s/1/
Basically the column options for different display sizes have to be tweaked, and if you're ok with hiding certain elements on small displays, that will make it easier.
To my understanding all you need for margin: 0 auto; to center the content is:
display: block;
No floats
No absolute positioning
And a set width
Any ideas on why this isn't working?
I can apply text-align: center, and this will center is, however I just want to center with the margins. Any ideas.
Here is the pen: http://codepen.io/anon/pen/JovwoJ
It is working, you just don't have another element wrapped around it to see that it is centered and its width is set to 100% so you can't see that it is centered because it takes up the full width.
HTML & CSS:
.wrapper
{
width: 80%;
margin: 0 auto;
display: block;
}
<div style="width:100%">
<div class="wrapper">
<div class="nav-bg">
<div class="nav">
Solar Panel Kits
Solar Water & Pool
Portable Solar
Solar Panels
Solar System Parts
Emergency Solar
Sale
</div>
</div>
<div class="info1-bg">
<div class="info">
<div class="inner2">
<b>Free Delivery Wordwide</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info2">
<div class="inner2">
<b>Free Return For 90 Days</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="info3">
<div class="inner2">
<b>Discount On Order Gift</b>
<b>At vero eos et accusamus et iusto odio dignis</b>
</div>
</div>
<div class="slider">
<img src="">
</div>
<div class="learnSolar">
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Basics</b>
</div>
<div class="learn1">
<b>Get Insight On</b>
<b>Solar Rebates</b>
</div>
<div class="learn1">
<b>Schedule A Free</b>
<b>Solar Analysis</b>
</div>
</div>
<div class="footer-bg">
<div class="footer">
Customer Service
Contact Us
Blog
Links
Learn More
FAQ
About Us
</div>
</div>
</div>
</div>
</div>
text-align is just centering the display:inline elements that are inside of your wrapper div.
You have the wrapper set to 100% width. With that, Margin: 0 auto; will automatically center the wrapper by giving it left and right margins of 0, since it's already taking up the entire page. You could set the wrapper to width: 90%;, or anything besides 100% to have it center correctly.
Further, the divs that are inside of your wrapper are all block elements, meaning they will take up the entire width of your wrapper. Which is why, even when it's centered correctly with Alex W's answer, it isn't centered by our standards.
Edit: I posted this because the previous answer didn't mention the wrapper width problem before it was edited, and I'm not able to make comments yet.
OK so i have the following HTML markup :
<section class="aboutus" id="aboutus">
<div class="container">
<div class="row">
<div class="col-md-4 text-center">
<span class="image-holder our-clients"></span>
<h2>Our Clients</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, aperiam sunt reprehenderit corporis quidem libero ad officiis odio labore ratione adipisci, delectus, maxime saepe dolorem optio id dolore facilis recusandae.</p>
</div>
</div>
</div>
</section>
and the following css style that applies :
.aboutus{
/*display: table !important;*/
height: 100%;
}
.aboutus .container{
display: table !important;
height: 100%;
vertical-align: middle;
}
.aboutus .row{
display: table-row !important;
vertical-align:middle; !important;
}
.aboutus .col-md-4{
height: 100%;
display: table-cell !important;
vertical-align:middle !important;
}
.aboutus .image-holder{
display: inline-block;
height: 210px;
width: 210px;
background: url('../images/professionals.png');
}
now if you have a look at the html code you will see the following class :
class="aboutus"
which takes 100% height(100% screen size) on any given device ,
now what i wanted to achieve was , i wanted to vertically align the part from col-md-4 onwards , in the browser.
so to sum it up :
<section class="aboutus" id="aboutus">
will take the full height of the device screen and :
<div class="col-md-4 text-center">
will perfectly vertically-align inside the
unfortunately the approach used my me works in chrome but not in firefox , although i am running almost latest versions of both . WHY is this happening ??
also , how good is the approach i have used cross-browser . i guess it won't work ie8 and below ? anyways , this is a supplementary question .
My main question is Why is my vertical align css code not functioning in firefox .
EDIT :: Below is my Prolem in a nutsheel :
WHY Does this work in chrome but not in firefox ??
Thank you.
Kind regards.
Alexander