Don't use specific CSS on smaller screens

Question

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

so, you don't want `.content` to have the margins, if the screen is less then a specified width? — Jacob G, Apr 17 '16 at 17:07

score 1 · Accepted Answer · edited Apr 26 '16 at 09:03

1

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>
...

edited Apr 26 '16 at 09:03

Mr Lister

45,515
15
108
150

answered Apr 17 '16 at 17:08

Vincent G

8,547
1
18
36

That didn't do any difference and I am using an iPhone 6. I also tried to put the max-width to 1000px without any success. – Max Apr 17 '16 at 17:16
Did you put the meta viewport in the tag ? `` – Vincent G Apr 17 '16 at 17:17
Yes I used it but your first suggestion didn't work the first time for some reason, it works now though. Thanks! – Max Apr 17 '16 at 17:38

score 1 · Answer 2 · answered Apr 17 '16 at 17:22

The syntax that you are using for media query is incorrect. One must specify the width at which the media query will trigger in other words the width on the screen at which the code inside the media queries that will overwrite the default code.

the syntax for the @media property is

 `@media not|only *mediatype* and (*media feature*) {
    CSS-Code;
}`

So you must use this code to achieve the desired results :

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

Don't use specific CSS on smaller screens

2 Answers2