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.

You need to have an active subscription to view this content.

Register Here!

  • 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