HTML and CSS Reference
In-Depth Information
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
@media screen and (max-width: 960px)
header h1,header p { width: 760px; }
header { padding: .75em 0 1.2em; }
section header {
float: none;
width: 680px;
Search WWH ::

Custom Search