modern-web-design-and-development

(^10) margin-right: 3%;
11 }
12
13 #sidebar-right{
(^14) width: 20%;
(^15) float: left;
16 }
17 .sidebar-nav{display: none;}
Now, we hide the two sidebars (below) and show the links to these pieces
of content. As an alternative, the links could call to JavaScript to just cancel
out the display: none when clicked, and the sidebars could be
realigned in the CSS to float below the content (or in another reasonable
way).
Here is the mobile.css (simpler) content:
1 #content{
(^2) width: 100%;
3 }
4
5 #sidebar-left{
(^6) display: none;
7 }
8
9 #sidebar-right{
(^10) display: none;
11 }
12 .sidebar-nav{display: inline;}
With the ability to easily show and hide content, rearrange layout elements
and automatically resize images, form elements and more, a design can be
transformed to fit a huge variety of screen sizes and device types. As the