HTML and CSS Reference
In-Depth Information
The primary change that you'll make that will adjust the layout, is to move the aside element to the bottom
of the page rather than alongside the other content. As you resize the window, the other changes were gradual
but this change will cause a jump. The main content will go from 70% of the window size to 100%. You'll need
to determine the appropriate width that should trigger the change. I choose 600px but you can experiment with
other values and see how the page works.
Enter the code in Listing 6-2 to the end of the existing style element.
Listing 6-2. Defining the small layout
@@media screen and (max-width: 600px)
{
/* Move the aside to the bottom of the page */
#contentArea, #MainContent, aside
{
display: block;
}
aside
{
width: 98%;
}
/* Use a single column for the article content */
article div
{
-webkit-column-count: 1;
column-count: 1;
}
/* Move the links closer together */
nav ul li a
{
margin-right: 15px;
width: auto;
}
/* Fix the line spacing of the header */
h2, h3
{
line-height:normal;
}
/* Force the intro element to stretch to fit the content */
.intro
{
height: min-content;
}
/* Move the book images to the left */
.book img
{
float: left;
 
Search WWH ::




Custom Search