CODEWITHSUNDEEP
csshtml
Timur
Timur

Reputation: 393

Making DIVs responsive

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

Answers (3)

Koen van Ras
Koen van Ras

Reputation: 15

Use bootstrap grid, you can set a col width per size.

The Bootstrap grid system has four classes:

  • xs - Extra Small (for phones)
  • sm - Small (for tablets)
  • md - Medium (for desktops)
  • lg - Large (for larger desktops)

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

Chuck Le Butt
Chuck Le Butt

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

Marc Hjorth
Marc Hjorth

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

Related Questions