Css max-width not working even apply correct code. HTML

I am using this codepen 404 page code. I have issue that is when I am apply CSS to make responsive on max with 420px. Then, it is not working even I am doing correct css.

@media and screen only(max-width: 420px){
.content{margin : 0 15px;}
} 
<div class="content">
<div class="browser-bar">
<span class="close button">Test</span>
<span class="min button">Test</span>
<span class="max button">Test</span>
</div>
<div class="text">inside div</div>
</div>

Thank you!

1 answer

  • answered 2018-07-11 03:39 Jismon Thomas

    if you are trying to apply CSS till max width 420px, change your code to

    @media screen and (max-width: 420px)
    

    example below:

    .content {
      margin:0 25%;
    }
    @media screen and (max-width: 420px){
    .content {
      margin : 0 15px;
      background: red;
      }
    }
    <div class="content">
    <div class="browser-bar">
    <span class="close button">a</span>
    <span class="min button">v</span>
    <span class="max button">n</span>
    </div>
    <div class="text">w</div>
    </div>
    screen shot of codepen window below 420px: enter image description here