Adding Media Queries to our WordPress theme

This tutorial will go over how to add CSS media queries to our WordPress theme. This will help us target and style different HTML elements for different devices. Bootstrap is a mobile first framework, so you will learn what this means and how we can use media queries in our responsive WordPress theme.

In this tutorial we will add the CSS styles to left align the footer copyright text on small devices and right align it on all the others. This will all be determined by the CSS styles in the media queries that target certain device widths.

Steps

  1. At the bottom of the styles.css file add the following media queries:

  2. Open the footer.php file and edit the HTML markup for the copyright section. Your footer.php file should now look like the following:

  3. Now we can target the .copyright class in our CSS file. Open the styles.css file and in the Footer section around line 95 add the following CSS:

  4. We don’t want the copyright text to always be set to float left, so we need to add some CSS to our media queries section. At the bottom of the styles.css file around line 320, add the following CSS code:

    This media query should now look like the following:

  5. Save all the files and check out your new, fancy copyright text in the footer of your site!

Notes from the Video

CSS-Tricks has a list of all kinds of different media queries. You can check out the full list here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Abu Jorhom

    simple and effective. I like it.

  • bn86

    I hadn’t actually realised that “mobile first” entails actually styling for mobile first, then making special changes for larger viewports using media queries. I always thought it was more of a design philosophy.

    • Same here. Important point to know. Thanks Brad! 🙂

  • Beatrix Wallace

    this is a general question concerning the whole use of bootstrap classes throughout these tutorials (and sorry if someone else posted something similar already) : isn’t redundant the use of “col-md-6” together with “col-lg-6”, since bootstrap media queries works with min-widths?

    • Using those different Bootstrap grid classes gives you more control on how your site will look at each breakpoint. You don’t have to use each breakpoint class if you dont want. For example, a lot of times I personally just use the col-md- breakpoint and let Bootstrap handle everything else with its media queries. You can read more about the Bootstrap grid here: http://getbootstrap.com/css/#grid