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;
  }
}
Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

2 Comments.

  1. Edward Jacob says:

    Hello Arun Basil Lal,

    Thanks for the blog post, you are really a life saver, your method for finding screen size based on CSS helped me to solve one problem in my WordPress theme, once again thank you

Leave a Reply

Your email address will not be published. Required fields are marked *

*