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

Figure 7-21. The styled vote count
Adding Media Queries
The layouts for smaller screens are fairly simple. On tablets, the room description moves to the top of the layout, and
the form and questions sit below, creating a one-column layout.
On handheld devices, the one-column layout persists, and the vote count moves above the vote button to save
even more horizontal space.
Update the “Media queries” section in main.css to match the code shown in bold in order to implement the
changes:
@media screen and (max-width: 960px)
{
header h1,header p { width: 760px; }
header { padding: .75em 0 1.2em; }
section header {
float: none;
width: 680px;