[Solved] Responsive layouts and grid systems headache

[JoniGiuro]

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?

Thank you and sorry for the long question

Jonas

[SSchnitzler]

Why would you need that?

You can just specify which column you want to be hidden on different media querys.

No additional markup or classes needed. Maybe I just dont get your point.

[Demo](http://46.4.196.53/)

[David_Leitch]

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&#8221;) 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.

[Claudiu Sararu]

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.

[Author]

Posts