The Responsive Layout Revisisted

My first thought was not to play around with this example too much as there seemed to be too many changes that I would need to make to my existing design to get it to work with all my page content.

I started to look at getting the side menu to be fixed on a desktop and tablet resolution and have a scrolling menu at the top of the page for a phone.

My existing design, which has very similar CSS to this page, has a side menu that scrolls off the top of the screen but the phone display works the way that wanted.

The design procedure

At the moment I am not sure why there are so many col(umn) classes defined here. According to the W3C page there is a reason.

I need to get the original W3C example (or the example with 2 break-points) as my attempts here have messed with the phone display.

What needs to be changed now

The design seems to work pretty well and the mobile screen seems to display as I want it. The colours are shit and I need to add back some of the other functions that I have in my current design such as shadows and a fixed bottom menu.

The fixed left menu would be good to position dynamically (sticky?)

Related Pages

External Sources


This page is an experiment in Responsive Design and CSS formating.

What I am trying to do

A fixed left menu on a larger screen and scrolling menu at the top of a phone screen.


Much playing around with the code!.