Build Your Own Business Website header image
3 comments… add one
Martin Slack July 11, 2017, 12:16 am

Whilst I understand this exercise was intended to illustrate the use of html container boxes, there is a much easier way to achieve a full width layout.
Just go to skin design – layout and dimensions and change the content and sidebar widths to something like 770px and 310px. The full width then is the sum of the 2.

Rick Anderson July 12, 2017, 8:25 am

Martin – that doesn’t really give you a “full width framework” style of skin. Yes you can set the widths of the columns but that doesn’t define full width sections.

Typically in this case you would be looking for a full width section for each of the header, content and footer that would allow them to be styled independently.

This does require another HTML element to wrap the page width element.

Martin Slack July 12, 2017, 3:13 pm

Rick – what I discovered is that the Classic Responsive variable $w_total derives its value as the sum of $w_content plus $w_sidebar. The width of the .container class seems to be $w_total. So, this page: was set to 1080px wide by setting content and sidebar widths to 770 and 310 (even though there is no content or sidebar boxes). You can also set the 3 values to 71%, 29% and 100% in the skin editor CSS and the page becomes full width. The problem with this though is that it is lost if you save skin design options again.
The only disadvantage I can see is that, when Classic Responsive is updated, I shall have to remember to change the 2 skin design values.

Leave a Comment