CODEWITHSUNDEEP
htmlcssmedia-queries
Mr N Dynamite
Mr N Dynamite

Reputation: 487

Move a div below another div at a certain screen width

I have a mobile website with 4 banners that appear side by side. When I get to a certain screen width, I want 2 of them to drop below the other 2. Part of the problem is that I have used width: 24.96% to obtain the right total width of all 4 divs to fit the body.

CSS

.small_banners .banner_block {
  display: block;
  max-width: 100%;
  height: auto;
  width: 24.96%; }

.small_banners {
  float: left;
  clear: both;
  width: 100%;
  margin: 0 0 15px; }

HTML

<div class="small_banners">
    <div class="banner_block">
      <div>
        Content
      </div>
    </div>
    <div class="banner_block">
      <div>
        2nd piece of content
      </div>
    </div>
    <div class="banner_block">
      <div>
        3rd piece of content
      </div>
    </div>
    <div class="banner_block">
      <div>
        The 4th piece of content
      </div>
    </div>
  </div>

When the screen reaches 958px I want the 3rd and 4th divs to drop below the 1st and 2nd, using a simple media query: @media all and (max-width: 958px) {

Upvotes: 0

Views: 5181

Answers (2)

RepeatQuotations
RepeatQuotations

Reputation: 724

Kishan's method does indeed work if implemented correctly! Here's a fiddle that illustrates using the css max-width property to change the width of the 4 .banner_block elements depending on the screen width.

https://jsfiddle.net/evc670st/1/

Note elements with class banner_block use display:block and float:left to stack horizontally. If you don't want to float these elements, you can use display: inline-block, but make sure there is no whitespace in between your html markup.

Source: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Upvotes: 1

kishan
kishan

Reputation: 301

this should work.

 @media (max-width: 958px) {
        .small_banners .banner_block{
           width:50% !important;
      }
    }

Upvotes: 2

Related Questions