Kevin W. Tharp
Doc Tharp

Butterfly Drinking Nector

The Responsive Grid: Step 1

In the page "The Fluid Grid: Fluid Images page 2", you are able to see how images and structure is flexible. However, the aside and the mainbody content both continue to get narrower and narrower as the width of the viewport are narrowed. At some point the viewport gets so narrow that the aside can no longer float beside the maincontent and it drops down below. By that time, the content is in two narrow columns that are very hard to read.

In this lesson we switch from a fluid grid to a "responsive grid". A responsive grid is one in which the page is able to self adjust when certain parameters are met, such as when the maximum width of the viewport is 460 as is the case in this page. Go ahead and narrow your viewport to see what happens as you reach that threshold. See how the mainbody content pops out to take up the whole viewport? Now go look at Fluid Images page 2 and narrow your viewport until the aside drops below. See how the mainbody stays at that narrow width? That ability to self-adjust and adapt to that viewport is the core principle of responsive web design.

Media Queries

The way we go from a fluid grid to a responsive grid is by using Media Queries. Media queries sample the medium that is being used to display the page, and if it meets certain criteria, it changes the way the rules that are applied to the cascade. In this page, we use a max-width and a min-width to load different rules for the aside and the mainbody based upon the width of the viewport

@media screen and (max-width: 460px) {
aside {
background-color: #F6D7A0;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
border: medium groove #333;
padding: 5px;
width: 100%; /* removes float right from the aside and sets width to full width of viewport for screens using less than 460px */
}
#mainbody {
width: 100%; /* sets mainbody to full width of viewport for screens using less than 460px : removes float left and changes width%*/
}
}
@media screen and (min-width:461px) {
aside {
background-color: #F6D7A0;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
margin-bottom: 10px;
border: medium groove #333;
padding: 5px;
float: right;
width: 34.47916666666667%; /* 331 / 960 */
}
#mainbody {
float: left;
width: 58.95833333333333%; /*566 / 960 */

In The Responsive Grid - Step 2, we consider how to prevent images that will not be viewed in small format browsers from downloading images that will not be displayed in their device.