The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Responsive layouts and grid systems headache

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #41387

    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



    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.



    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.

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.