HTML and CSS Reference
In-Depth Information
Add the media to the bottom of
main.css
to adjust the header and footer for smaller screens:
/* Media queries
----------------------------------------------------------------------------*/
@media screen and (max-width: 960px)
{
header h1,header p { width: 760px; }
header { padding: .75em 0 1.2em; }
footer { margin-top: 4em; padding: 0;}
footer ul { width: 740px; }
footer li,footer li.copyright { float: none; margin: .75em 0;}
}
@media screen and (max-width: 768px)
{
header h1,header p {
width: 90%;
min-width: 300px;
}
header { padding-bottom: .75em; }
header h1 { font-size: 2.4em; }
footer { margin-top: 3em; }
footer ul { width: 300px; }
}
Reload the file in your browser. At a glance, it will appear that nothing has changed, but if you resize your browser
window, you'll see that the elements adjust for the different screen sizes (see Figure
7-7
).
Search WWH ::
Custom Search