Responsive Web Design

Forum Moderators: not2easy

Message Too Old, No Replies

Responsive Web Design

raydona

12:02 pm on Aug 14, 2015 (gmt 0)

Hi,
I'm new to Responsive Web Design. If I were to create a two column layout, main content and right sidebar with widths in percentages, for a 960px wide page, for a mobile [@media only screen and (max-width: 320px)] would I have to redesign the layout as one column with the right sidebar being below the main content? All help would be appreciated.

bhukkel

12:17 pm on Aug 14, 2015 (gmt 0)

You could design the page with two columns and for the mobile layout just hide the second column and give the first column a 100% width.

Or do you want to display the content of the sidebar on mobile?

raydona

1:01 am on Aug 16, 2015 (gmt 0)

Hi,
Thanks for your reply. I need to display the content of the sidebar on mobile as it will contain a menu with links to other pages.

lucy24

2:34 am on Aug 16, 2015 (gmt 0)

(max-width: 320px) and two columns don't go together. Even double that width, 640px, is really pushing it for multiple columns.

One super-simple approach is to set each column to {display: inline-block} with a min-width. If the two min-widths combined don't add up to the viewport width, it bounces to one-after-the-other display.

LuckyLiz

7:50 pm on Aug 18, 2015 (gmt 0)

If the only thing that will be in one of the columns is the menu and nav links, the solution for the small mobile screen (and tablet size) is to put them in a hamburger menu icon (three bars, one under the other) and have it drop down when people click on the icon. If you don't think they'll know what the icon is, put the word Menu next to it.

tangor

11:01 am on Sep 27, 2015 (gmt 0)

How deep is your menu/nav? Sometimes old school (everything on one column) is the best approach. We're talking less than 10 options!

LuckyLiz

3:37 pm on Oct 17, 2015 (gmt 0)

We have less than 10 options on the hamburger/menu.