[SOLVED] Don't use specific CSS on smaller screens

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;
    }
 }

Solution

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 <head></head> tag to make it works on your phone :

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