Wordpress Snippets

Identify Mobile / Tablet / Desktop Using Screen-size in CSS

Add these to your CSS stylesheet as necessary.

CSS to be used only on Mobile devices

This CSS will be used when the screen width is less than 576px.

@media screen and (max-width: 576px) {
  .selector {
    property: value;
  }
}

CSS to be used on anything BUT Mobile phones

This CSS will be used when the screen width is greater than 576px.

@media screen and (min-width: 576px) {
  .selector {
    property: value;
  }
}

CSS to be used only on Tablets

This CSS will be used when the screen width is between 576px and 768px.

@media screen and (min-width: 576px) and (max-width: 768px) {
  .selector {
    property: value;
  }
}

Hire Us. Or just say Hi!
Need a job? Apply to get one.