Reputation: 393
I have a section which have 4 div's, which are centered.
I need to make next:
When screen width is greater than 1280px it display 4 div's in a row, When screen width is smaller than 1280px it need to display 2 div's per row And when screen width is smaller than 640px one per row.
html
<section class="gallery">
<div class="flex flex--center">
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
</div>
</section>
css
.flex{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.flex--center{
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.gallery-div{
background-color:pink;
width:300px;
height300px;
margin:10px 5px;}
@media (max-width: 640px) {
.home-section .flex {
display: block;
}
Upvotes: 1
Views: 95
Reputation: 15
Use bootstrap grid, you can set a col width per size.
The Bootstrap grid system has four classes:
http://getbootstrap.com/css/#grid
You can add multiple classes so for example:
<div class="col-xs-12 col-sm-6 col-md-3"></div>
Upvotes: 0
Reputation: 48826
Using Bootstrap for this is completely unnecessary!
You can do this with some simple CSS:
.gallery-div{
background-color:pink;
width: 100%;
height:300px;
float: left;
}
.gallery-div:nth-of-type(even) {
background-color: cornflowerblue;
}
.clear {
clear: both;
}
@media (min-width: 640px) {
.gallery-div{
width: 50%;
}
}
@media (min-width: 1280px) {
.gallery-div{
width: 25%;
}
}
<section class="gallery">
<div class="center">
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="gallery-div">
</div>
<div class="clear"></div>
</div>
</section>
Upvotes: 3
Reputation: 1960
You can apply this class to your gallery-div
<div class="col-xs-12 col-sm-6 col-md-3"></div>
It will make your row show 1 image in xs (extrasmall), show 2 in sm (medium) and show 4 on greater screens; md (medium and large/lg )
Hopefully it clarifies it a little bit :)
Upvotes: -1