CODEWITHSUNDEEP
htmlcssmedia-queries
Ashir K.
Ashir K.

Reputation: 121

CSS Media Queries not reading the customization?

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?

Upvotes: 1

Views: 46

Answers (2)

VXp
VXp

Reputation: 12068

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>

Upvotes: 1

code.rider
code.rider

Reputation: 1897

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

Upvotes: 2

Related Questions