CSS depending on screen resolution (useful for smartphones)

Here is a good example for how you can tweak your css so it will display something for desktop users, and something else for smartphone users.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#header .header-content{
	width:75.1%;
	font-weight:bold;
	font-size:23px;
	margin:auto;
}
@media (max-width: 800px) {
  #header .header-content{
	width:95.1%;
	font-weight:bold;
	font-size:23px;
	margin:auto;
   }
}

As you see, the website will first pull “header-content” and if the device used by the visitor has a lower resolution than 800px, it will pull the second “header-content”.
Be sure to keep the right order.

Another example for the body tag.

2
3
4
5
6
7
8
9
10
 
body{
   background-color:#fff;
}
@media (max-width: 800px) {
  body{
     background-color:#000;
      }
}

ADD A COMMENT: