I have a grid something like this:
<div class="container">
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
<div class="item">
Some Content
</div>
</div>
And CSS like this
.container{
width:100%;
}
.item{
width:33%;
float:left;
min-width:150px
}
What happens in this situation is that if the container is bigger than 450 pixels you get three columns and two rows. If the container's width reduces to below 450px you end up two columns and three rows and the items are forced to 150px width.
The problem is that there is unsightly whitespace to the right of the second item.
I would like to make it so that the items always fill the container's width. Is this possible?
Have you tried jQuery Masonry? I think that it's the best solution to your problem: jquery masonry
Related
I have a two column bootstrap page as shown below. The left contains two rows (an image and a bordered bit of text below the image that fills the whole column width), the right is login details.
The image is 700px wide, and for smaller devices or screen widths I change to a smaller image. This all works fine. However when I resize the browser the right login column overlaps the left column's 700px image by about 40 pixels before it snaps to a single column.
I tried to fix this by putting in a minimum width for the left hand column like this:
<div class="col-md-8" style="min-width: 768px">
Which worked and it snapped correctly, however on doing so the left hand side main bordered text (that is a row below this image) then became fixed width and did not resize.
How can I get it so the two columns do not overlap and the text still flows in my bordered text.
thanks.
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<DIV class="row">
<div class="col-md-12">
<img class="loginPic hidden-xs" src="images/pic.png" >
<img class="loginPic visible-xs" src="images/pic-small.png" >
</DIV>
</div>
<br />
<DIV class="row">
<div class="col-md-12">
<div style="border: 1px solid #00549d; border-radius:10px;">
<div style="padding:20px;font-size: 13px;">
<p>Lots of text.</p>
</div>
</div>
</div>
</DIV>
</div>
<div class="col-md-4 pull-left" >login stuff here</div>
</div>
</div>
I have image that have space when i look at device with resolution sm and xs how to make it fit with the grid?
here is my code
<div class="container">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
from the resolution 991px to 581px I get blank space from image (like it didn't fit to the grid)
http://www.bootply.com/10CUN9fXqG#
How do I fix it?
I would just add width: 100%; to your image
May be it will be your solution code:
<div class="container-fluid">
<div class="row">
<div class="col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive" style="width:100%" alt="Image">
</div>
<div class="col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
</div>
</div>
You're not using bootstrap classes for sm and xs screens, use that as well as change the img from max-width to width.
img{
width :100%;
}
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-7">
<img src="http://placehold.it/550x350" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-12 col-md-5">
<h2>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</h2>
<p>How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining it's width:height ratio?</p>
</div>
.img-responsive {
margin: 0 auto;
}
Try adding custom styling
I have a problem with equal height cols/boxes in bootstrap in combination with nested colored divs. Have a look here how it looks like: https://www.dropbox.com/s/ko6zmqwup4wgasb/bootstrap-equal-height-cols.jpg?dl=0
Actually to set cols to equal heights isn't that problem with flex boxes anymore. The difficulties I encountered is the set it up for the proper look. The bootstrap cols can't have the colored background due to their setup with margins and paddings. Because I have 2 divs within the row wrapper it seems to be difficult to fix this problem. The reduced HTML code:
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">
<div class="portfolio-el bg-dark-gray">
<div class="view">
<img src="images/image_360x180_1.jpg" alt="dummy">
</div>
<div class="portfolio-text-content">
here goes text which causes different heights of those boxes...
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="portfolio-el bg-dark-gray">
<div class="view">
<img src="images/image_360x180_2.jpg" alt="dummy">
</div>
<div class="portfolio-text-content">
here goes text which causes different heights of those boxes...
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="portfolio-el bg-dark-gray">
<div class="view">
<img src="images/image_360x180_3.jpg" alt="dummy">
</div>
<div class="portfolio-text-content">
here goes text which causes different heights of those boxes...
</div>
</div>
</div><!-- end row -->
CSS:
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.bg-dark-gray {
background: #efefef;
}
all the rest is done by bootstrap classes > grid, etc.
I have seen examples giving the cols flex: 1, but I need a height of 100% for the divs with the gray background. Any ideas or workarounds? Cheers
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
<div style="float:left">
<div class="designerWrapper">
<div class="pageBox">
content
</div>
</div>
</div>
<div style="float:left; margin-left:10px;">
content 2
</div>
<div style="clear:both"></div>
<br /><br />
How do I make the div that holds content 2 100% width? If I set it to 100% width it is too wide, at the moment it expands with it's contents length.
you sould use the table stuff
<div id="outer1">
<div id="outer2">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
css:
#outer1 {display:table;width:600px;height:30px;}
#outer2 {display:table-row;width:600px;height:30px;}
#left {display:table-cell; width:15px;}
#right {display:table-cell; width:auto;}
important there is no floating! because the table display floats the cells automatically.
i didnt test the code hope works.
You can set min-width depend upon your requirement.
later on it will expand with its content
<div style="float:left; margin-left:10px;min-width:110px;">
content 2
</div>