All Collections
FAQ's and Troubleshooting
Applying CSS changes For A Specific Screen Resolution
Applying CSS changes For A Specific Screen Resolution

How to apply CSS changes to a specific screen resolution using CSS Media Queries

Karen avatar
Written by Karen
Updated over a week ago

Any custom CSS changes can be applied only to a specific screen resolution, in order not to affect all the devices and avoid any unexpected behavior. Say you have some CSS to change the font size for h2 site headers:

h2 { font-size: 36px; }

36px font-size might be too big for small screens, so we don't want the code to affect small screens. All we have to do is wrap the code by additional CSS called Media Queries.  To apply the code to all screens that are bigger than 480px we can use this code instead:

@media (min-width: 481px) {
    h2 { font-size: 36px; }
}


In the example above you can see how  h2 { font-size: 36px; }  is wrapped by  @media (min-width: 481px) { }  .

There are a lot of combinations you can apply for different screen resolutions and different CSS rules. Here is another example that will work in the following condition. If screen size is bigger than 767px but smaller than 1024px:

@media (min-width: 767px) and (max-width: 1024px) {
    h2 { font-size: 36px; }
}

If you want to learn more about CSS Media Queries please check out the following tutorial: https://www.w3schools.com/css/css3_mediaqueries.asp

If you want to use CSS Media Queries to display the Divi Modules on certain screen resolutions you may want to check this tutorial.

Did this answer your question?