Max Max - 7 months ago 7
HTML Question

Don't use specific CSS on smaller screens

I have some CSS that makes the whole site content have a marging to the left and right with 5em.

.content {
margin-left: 5em;
margin-right: 5em;
}


However, I want the margin to NOT work(not have a margin) or only have a margin with 1em when I enter the site on a mobile phone or touchpad. I have tried the following code but nothing happens. More specificly, I want this to be activated, and have no margin or only margin on 1em, on the screens that uses the initial scale I have set on every page. And I suppose that its only phones and pads.

@media screen
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
@media print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}
@media screen,print
{
.content {
margin-left: 1em;
margin-right: 1em;
}
}

Answer

You can use a media query with a specified width to achieve that :

@media (max-width: 640px){
    .content {
      margin-left: 1em;
      margin-right: 1em;
    }
}

See here common device width to choose the width you want : http://mydevice.io/devices/

Also don't forget to include the viewport meta in your tag to make it works on your phone :

...
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
Comments