Creating HTML and CSS Markup - Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery - page 123

The following code adds extra rules for smaller viewports:
@media screen and (max-width: 960px)
{
header h1,header p { width: 760px; }
header { padding: .75em 0 1.2em; }
section { width: 740px; }
p { margin: 0 0 2em; padding: 0; }
header>p,section>p { font-size: .875em; }
form { width: 340px; padding: 0 8px; }
form p { font-size: 1em; }
label { width: 100%; }
input { font-size: 1.5em; }
label input { width: 91%; }
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,section {
width: 90%;
min-width: 300px;
}
header { padding-bottom: .75em; }
header h1 { font-size: 2.4em; }
form,form#attending {
float: none;
width: 90%;
margin: 0 auto 3em;
}