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