Grow your CSS skills. Land your dream job.

[Solved] 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 (

    <

    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

    # 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.

    [Demo](http://46.4.196.53/)

    # 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](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.

    # 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.

    # August 4, 2014 at 12:51 am

    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.

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

You must be logged in to reply to this topic.

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