PVII Adaptations: Repositioning the sidebar
PVII Adaptations: When you need one page that fits all devices
29-Aug-2012
Adaptations Tutorials Home | Adaptations Home | Adaptations Examples
PVII Adaptations produces responsive Web pages that automatically adjust to the size of the browser window or the type of device being used. It even adapts to the orientation—portrait or landscape—of your mobile device. Adaptations also adapts via easy CSS edits you can use to meet your customization goals.
Can I change the sidebar position?
By default, Adaptations 3-column layouts place the sidebar column on the left. What if you want the sidebar in the middle—or all the way on the right? Can you do that—and if you do will you need to perform major surgery on your CSS? Adaptations CSS and markup was engineered to make such changes quick and easy.
Positioning the sidebar between the menu and the main content
In wide-screen view, the default Layout 1 page has a sidebar, followed by a menu, followed by the main content. It looks like this:
Your client, however, wants it to look like this:
All you need to do is locate these 2 CSS rules in your base p7adapt-01.css file
.sidebar {
width: 20%;
float: left;
position: relative;
left: -20%;
line-height: 1.35;
}
.navigation {
width: 20%;
float: left;
position: relative;
left: 20%;
}
Change them to:
.sidebar {
width: 20%;
float: left;
line-height: 1.35;
}
.navigation {
width: 20%;
float: left;
}
That's it. The responsive features of your page will continue to work perfectly even though you have changed the position of the sidebar and menu coulmns.
Positioning the sidebar to the right of the main content
What if you want your page to look like this?
No problem.
Locate this CSS rule in your base p7adapt-01.css file:
.main-content {
width: 60%;
float: right;
line-height: 1.35;
}
Change the float from right to left:
.main-content {
width: 60%;
float: left;
line-height: 1.35;
}
That's it! The responsive features of your page will continue to work perfectly even though you have changed the position of the sidebar and menu coulmns.