CSS apply styles according to screen resolution

Question

I have a CSS class like:

.container {
    padding-left: 150px;
}

What I want is when the screen resolution is tablet or mobile I want the padding-left to be like 10px only.

How can I do this?

By using [`@media`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Examples) queries. — giorgio, Nov 15 '16 at 08:32
Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — giorgio, Nov 15 '16 at 08:34

score 0 · Answer 1 · edited Nov 15 '16 at 13:35

You can use CSS @media query to do it. You provide breakpoints as its argument, as for example here.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

[..etc..]

score 0 · Answer 2 · answered Nov 15 '16 at 08:37

Use CSS Media Queries. Just for your reference example I've taken screen sizes as a reference from Bootstrap.

/* For Mobile Phones */
@media screen and (max-width: 767px) {
  .container {
    padding-left: 10px;
  }
}

/* For Tablets (Portrait) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .container {
    padding-left: 10px;
  }
}

Hope this helps!

CSS apply styles according to screen resolution

2 Answers2