CSS Media Queries not reading the customization?

Question

I am creating custom Grid and I want to show 4 Columns if Screen size is big and 2 columns if the minimum screen size is 50px and maximum screen size is 400px. I wrote the media query but it's not working. Following is my code:

.CustomGridHeader {
  width: 100%;
}

.Grid {
  width: 50%;
  float: left;
}

.item {
  width: 50%;
  float: left;
  border: 1px solid;
}

@media (min-width: 50px) and (max-width: 300px) {
  .Grid {
    width: 100%;
    float: none;
  }
}

<div class="CustomGridHeader">
  <div class="Grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="Grid">
     <div class="item">
        Item 3
     </div>
     <div class="item">
        Item 4
     </div>
  </div>
</div>

What am I doing wrong?

if my answer solve your problem don't forget to make it as accepted or correct answer — code.rider
– code.rider, Commented May 17, 2018 at 7:31
CSS3 has far evolved with flexbox and grid, please make use of that. — Abin Thaha Azees
– Abin Thaha Azees, Commented May 17, 2018 at 7:32

code.rider · Accepted Answer · 2018-05-22 07:24:03Z

2

The solution is

.CustomGridHeader {
     width: 100%;
}

@media (min-width:300px){
.Grid{
    width:50%;
    float:left;
 }

 .item
 {
    width:50%;
    float:left;
    /*border:1px solid black;*/
 }
}
 @media (min-width:50px) and (max-width:300px) {
   .Grid {
      width: 100%;
      float: none;
   }
   .item
 {
    width:50%;
    float:left;
    /*border:1px solid black;*/
 }
}

<div class="CustomGridHeader">
    <div class="Grid">
        <div class="item">
            Item 1
        </div>
        <div class="item">
            Item 2
        </div>
    </div>
    <div class="Grid">
       <div class="item">
            Item 3
       </div>
       <div class="item">
            Item 4
       </div>
    </div>
</div>

updating the answer after updating the question removing 1px border from class item its taking 1px extra from 100% if you want bordered element then you have to decrease class item width according to border width

you can check this by resizing your working window

Thanks

edited May 22, 2018 at 7:24

answered May 17, 2018 at 7:26

code.rider

1,90718 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

code.rider Over a year ago

this window is not responsive click the button Copy snippet to answer and then click edit the above snippet then run this code and resize that window you will see it works

code.rider Over a year ago

the you have to edit your html in this question we are playing with class grid if screen size big then show two column if small then single column for you have to do this @media (min-width:300px){ .Grid{ width:25%; float:left; } .item { width:50%; float:left; border:1px solid black; } }

VXp Over a year ago

That's what the OP is asking for.

VXp · Accepted Answer · 2018-05-22 07:31:11Z

1

I'd rather suggest you the Flexbox solution, which takes much less code:

.CustomGridHeader, .Grid {display: flex} /* displays flex-items (children) inline */
.Grid, .item {flex: 1} /* stretches them so they take full and equal width */
.item {border: 1px solid}

@media (max-width: 400px) {
  .CustomGridHeader {flex-direction: column} /* stacks them vertically */
}

<div class="CustomGridHeader">
  <div class="Grid">
    <div class="item">
      Item 1
    </div>
    <div class="item">
      Item 2
    </div>
  </div>
  <div class="Grid">
     <div class="item">
        Item 3
     </div>
     <div class="item">
        Item 4
     </div>
  </div>
</div>

edited May 22, 2018 at 7:31

answered May 21, 2018 at 12:44

VXp

12.1k6 gold badges34 silver badges47 bronze badges

Collectives™ on Stack Overflow

CSS Media Queries not reading the customization?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related