Forums

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

Home Forums CSS Stack sides columns on responsive layout

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #195128
    fkw
    Participant

    Hi everybody,

    I’ve got a 3 columns responsive layout that looks like this: http://isenselabs.com/img/uploads/stacked-columns_141ddb6f2f.png
    My problem is that I need one more step for tablets where the right column stack under the left colum, and the content area (green) feet the rest of the page…
    What is the logic here ?

    Thanks for your help

    #195130
    Paulie_D
    Member

    We can’t really comment on code we haven’t seen.

    Please provide a reduced case example in Codepen.

    #195131
    fkw
    Participant

    Well, the thing is that I dont know the logic to apply in this case so I prefer not to provide any code.

    All sizes are fixed (px), all columns are floating left, columns 1 and 3 are the same size.

    For example:
    Desktop view= container 1200px, side columns 300px, content 600px (300+600+300)
    Tablet view= container 1000px, one side column 300px, content 700px (300+700)

    #195140
    shaneisme
    Participant

    If you have no code, perhaps check out what some popular frameworks do?

    http://getbootstrap.com/css/#grid

    http://foundation.zurb.com/docs/components/grid.html

    Both are open source so you can check them out.

    #195154
    Paulie_D
    Member

    Also, it will depend on what browsers you want to support.

    Flexbox can do this easily enough but support is really only for modern browsers (IE10+ ish)

    http://caniuse.com/#feat=flexbox

    Other than that..a CSS framework with as shaneisme suggested would allow you to re-organise layouts in association with media queries.

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