CODEWITHSUNDEEP
htmlcss
Rafi Priatna Kasbiantoro
Rafi Priatna Kasbiantoro

Reputation: 83

@Media screen with margin doesn't work

I have 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
  }
}

in desktop, i have margin right and left 169px. but in mobile i have margin right and left 169px too. I want remove that margin on mobile version. But my @media screen doesn't work

Upvotes: 5

Views: 2839

Answers (3)

Cyril
Cyril

Reputation: 11

Try this

/*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
  }
}

To know more about @media go to : @media for responsive design in websites

Upvotes: 1

rubinmon
rubinmon

Reputation: 173

try this @media max-width:400px, i call a logo class and display it none,and that position ,min-width:400px , i call another class and display it..

@media screen and (max-width: 400px){
    .logo{
      display: none;
    }
}
@media screen and (min-width: 400px){
    .brand1{
    display: inline;
  }
}
  1. First design your local via simple code and practice this code.
  2. use min instand of max

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

1) Use of max-width instead of min-width.

2)(min-width:768x) and (min-width-922px) in @media Query have same style so,you can merge them.

Note: For see result use full page and resize 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>

Upvotes: 0

Related Questions