- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
We can’t really comment on code we haven’t seen.
Please provide a reduced case example in Codepen.
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)
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.
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.