HTML and CSS Reference
In-Depth Information
• Remove the float from the .media images so the accompanying text drops be-
low each image.
At 340 pixels
• Makethemainnavigation linksblockelements (instead ofinline-block), sothey
align vertically instead of horizontally.
The values chosen for these media queries (930, 730, 480, and 340) are not arbitrary, nor do
they represent specific devices or commonly-used browser window sizes. These values are
points at which the layout was breaking, and thus needed adjustments. These break points
were discovered by resizing the browser window until the layout no longer looked readable
or usable.
For each project, find out where the primary break points are, and then work from there,
adding styles to the media queries after some trial and error.
To fiddle with these styles, view the CSS for the final version of RecipeFinder or download
the code from the code archive for this topic.
We can test RecipeFinder on a number of different devices to see if it works, or we can
use an online tool that displays a URL in various widths, mimicking what happens in vari-
ous devices sizes. One such tool is located at http://mattkersley.com/responsive/ . Figure 5.15
shows us how RecipeFinder looks after adding our responsive styles.
Search WWH ::




Custom Search