Grow your CSS skills. Land your dream job.

Responsive layouts and grid systems headache

  • # December 17, 2012 at 4:19 am

    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 (

    ) 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


    # December 17, 2012 at 6:00 am

    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.


    # December 17, 2012 at 6:43 am

    @SSchnitzler You shouldn’t need to hide content. If you’re hiding it on one device, then that probably means it shouldn’t be there on other devices.

    # December 17, 2012 at 6:52 am

    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]( “”) 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.

    # December 17, 2012 at 10:00 am

    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.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".