Monitor the media queries of your responsive theme in WordPress

Posted on by Elio Rivero

With responsive design gaining more momentum every day and WordPress as the most popular CMS around it is only natural to develop more tools to ease our life developing with it. Here you’ll find a simple tool so you can always keep an eye on which media query is currently in use in WordPress, using the Admin Bar.

Here’s how to use it:

  1. Download Media Queries Monitor

Media Queries Monitor for WordPress

  1. Upload or copy it to your wp-content/plugins folder in your WordPress installation on your server or hard drive  
  2. Log in to WP Admin and activate it in the Plugins screen.
  3. Go to the settings page at Settings / ILC Media Queries Monitor
  4. Enter the media queries you’re using in your responsive layout in the text area as shown in the video, ordering them by size, and save the changes

As shown in the video, if you now go to the front end while logged in, you’ll see a number on the left of the Admin Bar which is the current media query in use.

Published by Elio Rivero

Software engineer, designer and photographer.

Leave a Reply