[Solved] Responsive layouts and grid systems headache

Hi all,
every time I start to code a new responsive page I come up with this question so I thought I ask you guys about it:
“is it normal to break readability when adding responsiveness to pages?”

I think you’ll better understand with an example:
I have 2 big columns in a 12 columns grid system so I set 2 divs with class .grid-6 and in the css .grid-6 {width:50%}. In the tablet layout the graphic designer has placed three columns so i change the width of those columns to 33% but now I have a div with class grid-6 (which suggests 50% width) and an actual column width of 33%.

So when I start working on responsiveness it all just feels like “hacks”..
I though about adding different classes for tablets and phones or other devices (

<

div>) but that just doesn’t feel right.

the problem appears when you receive a graphic design that has different amount of columns for each breakpoint..I mean, you can’t change the column count in the html, amirite?

If the design does mandate that you need to hide content, perhaps you could label that element with a class of ‘no-phone’ or ‘no-tablet’, while keeping the class of ‘grid-6′. I’ve dummied it up [here](http://codepen.io/joe/pen/IKtem “http://codepen.io/joe/pen/IKtem”) to show what I mean. That way you can reuse both those classes as needed.

But I do agree with @joshuahibbert. If it’s not essential on the phone, it may not be essential on the desktop.

The only real time I hide content is when I’m swapping it out for a mobile friendly version, or reordering it in the DOM. For example, on our new site that’s in development I have our snail mail address on the contact page come before the contact form. (To the left of it).

On mobile I wanted the form first and the address to be below, so I used a class of .mobile-hide & .mobile-show.

As @joshuanhibbert said, if you’re hiding content because it’s irrelevant then you should probably just get rid of it all together.

I’ve been using Gridify-css for a while now and i’m totally happy with it. It has specific classes for desktop/tablet/mobile views + hidden classes (classes that make the content hidden on the device you want it to not show up.)

It seems very easy to use and the file for the grid system is only 13 or 14 KB large.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.