Really Easy Responsive Columns in WordPress

7 Feb , 2013  

I’m leaving this post up because it does work but you can find my latest solution to this problem here – Really Easy Responsive Columns in WordPress 2 – the Plugin Solution – 17th January 2014

Thought I’d do a quick post about this although I have contributed nothing but a media query to the awesome Justin Tadlock’s grid columns plugin. So if you came across this article looking for a columns plugin then go ahead and use that one – Justin coded it, so it’s gonna be done right!

The grid columns plugin gives a completely fluid column set up and I wanted the columns to collapse down to one column for mobile – bootstrap style. This turned out to be so laughably easy I wanted to share it.

After downloading the plug in open up the css file – columns.min.css. This is the plugin’s css file compressed to one line. Simply wrap this line in a media query at the width you’d like the columns to collapse and you’re done. You were expecting more?

@media screen and (min-width: 650px) {
.column-grid{clear:both}.column-grid:after{content:".";display:b... etc

After that just install and activate the plugin.

I made this post into a demo – resize that thar browser shipmates!

, ,

3 responses to “Really Easy Responsive Columns in WordPress”

  1. Raymond Duke says:

    Excellent. Just what I was looking for. Just popped it into my site. I wonder why such a simple feature took this long to easily implement?

  2. Luka Peharda says:

    Great article but what concerned me is that you can’t update the plugin so easily (you need to edit its CSS files every time you update). Beside it is not a good practice to modify someone else’s plugins/code.

    Your article however lead me to a solution that I found to be better (at least for me). In my theme I checked if grid-columns handle is enqueued in styles and if it is, I modified its media attribute. Sample code:

    if (wp_style_is(‘grid-columns’)) {
    global $wp_styles;
    $wp_styles->registered[‘grid-columns’]->args = ‘screen and (min-width: 710px)’;

    (This code is hooked to the “wp_enqueue_scripts” action.)

    • tonyhill16 says:

      Fantastic update Luka!

      It’s a bit of a WordPress noob mistake to edit the plugin like that. Sorry!
      As a matter of fact Justin has updated the plugin so when I run that update I’ll test out your code.

      Thanks again!

Leave a Reply

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