@Media brand screen does not work

Question

I have a code like this:

    /*footer*/
footer{
  position:relative;
  display:block;
  padding:15px;
  text-align:center;
  background:#000;
  margin:0 169px;
}

    /*Footer*/
@media only screen and (min-width:600px){
  #footer-wrapper .footer{
     float:left;
     width:100%;
     display:block; 
     margin:0 auto
  }
}

@media only screen and (min-width:768px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}

@media only screen and (min-width:992px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}

on the desktop, I have 169px right and left. but in mobile I have an edge on the right and left 169 pixels. I want to remove this margin in the mobile version. But my @media screen is not working.

Answer 1

1) Use max-widthinstead min-width.

2) (min-width:768x) and (min-width-922px) in @media Queryhave the same style, so you can combine them.

Note. To view the result, use full pageand resize the browser.

  body {
    margin: 0;
  }

footer{position:relative;display:block;padding:15px;text-align:center;background:#000;margin:0 169px;}

    /*Footer*/

@media only screen and (max-width:600px){#footer-wrapper .footer{float:left;width:100%;display:block; margin:0 auto}
@media only screen and (min-width:768px) and (max-width:992px){#footer-wrapper .footer{width:100%; margin:0 auto}

<div id="footer-wrapper">
<footer class="footer">
   This is Footer
</footer>
</div>

Run codeHide result

Answer 2

@media max-width:400px, logo class none, , min-width:400px, .

@media screen and (max-width: 400px){
    .logo{
      display: none;
    }
}
@media screen and (min-width: 400px){
    .brand1{
    display: inline;
  }
}

• .
• min instand max

Answer 3

try it

/*For Desktops*/
@media only screen and (min-width:768px){
footer{
  position:relative;
  display:block;
  padding:15px;
  text-align:center;
  background:#000;
  margin:0 169px;
}
}

/*For Mobile Devices*/
@media only screen and (max-width:767px){
  #footer-wrapper .footer{
    width:100%; 
    margin:0 auto
  }
}

Run codeHide result

To learn more about @media, follow this link: @media for responsive website design