New Layout analysis

The Responsive layout design that I started with has worked well for me. The new layout I am trying to create a fixed left menu that remains on the screen when the page is scrolled. Also I want to "rationalise" the CSS and make it more understanderble.

The working example (3 columns) has a few things that I have yet to work out.

To get the menu width so that it doen't overlap when the iPad screen is flipped to portrait I changed the menu class width to 23%

5th Iteration

In this version I am going to minimise the css and try to simplify the Media Query

The classes

.row::after {   content: "";   clear: both;   display: block; }
.left { float: left; padding: 15px; }
.main { float: left; padding: 15px; }

The menu classes are pretty much as they were before, the buttons are styled and shadowed to my liking.

The CSS

/* For desktop: */
.left {width: 16.66%;}
.main {width: 75%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  .left { width: 100%;	}
  .main { width: 100%;	}
  .menu ul   {position: relative; top: 0px; width: 100%;}
}

Links

• CSS Position
• CSS Media Query
• The Viewport
• FBM reviewed

External Sources

• CSS @media Rule - 🔗 - W3C - where the example for the Responsive layout was found
• Responsive Web Design - The Viewport - 🔗 - W3C