CSS Media Queries Aren’t Complicated…

  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
  • StumbleUpon

Just like ANY CSS – all you need to know is the name of the class or id that you want to change…

Here’s something I just did a few minutes ago. There was WAY too much padding on the mobile version of a page title on a Divi site –  so the element in question was .et_pb_section class, but it could be anything.

Meaning you will need to find out what the name of the element you need to change/fix before you can setup media queries to set different css styles to your responsive theme. I would like to believe that if you are reading this, you don’t need css dumbed down THAT much, right?  😉

So this is the default padding for this section:

 

.et_pb_section {padding: 50px 0;}

50 pixels isn’t THAT much on a full sized monitor but it is HUGE on tablets and phone! It looked like the title was hanging out in the middle of the screen…

So here’s how it works:

This goes right into your custom css just like any other css code:

@media all and (max-width: 980px) {

.et_pb_section {padding: 0;} <- this is a “normal/regular” css rule

}

@media all and (max-width: 980px)this is the media query – it means all screens UP TO 980px should use this code.

That’s it – media queries in a nutshell – it’s just a container that has a width at which it should be applied.

And you can use different screen sizes to customize anything you can control via css – which is damn near everything…

Previous

Next

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It on Pinterest

Share This

Share this post with your friends!