CODEWITHSUNDEEP
htmlcssiphonesmartphonetouchpad
Max
Max

Reputation: 375

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

Upvotes: 0

Views: 42

Answers (2)

Nutshell
Nutshell

Reputation: 8537

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

Upvotes: 1

Rasik
Rasik

Reputation: 903

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

Upvotes: 1

Related Questions