Update: a solution is now included with the files.
style.css and examine the code to see how the basic structure is set up. As you review the CSS file, note the three canonical features of a “responsive design”:
- The main container (
#container) is only restricted by a
max-widthproperty, meaning it can contract to a smaller width when the browser window gets skinnier than 1200px.
- Images on the page do not have
heightattributes. Instead, CSS is used (
max-width:100%) to allow them to scale down with their container. Using
widthensures that the images will never be scaled up and get pixellated.
- Finally there are two media queries set up to detect when the browser becomes “medium-wide” (600 – 999px) and “wide” (1000px – 1200px). These contain distinct rules that supplement or override the primary rules above them in the stylesheet.
Your task is to find all the instances of
PERCENT and choose replace them with actual percentage values that will make the page lay out differently for medium and wide screens. The medium layout should use two columns, while the wide column should use three.
- Responsive Web Design, Ethan Marcotte’s article that kicked the movement off.
- Responsive Web Design, Ethan Marcotte’s book. $9 for the ebook.
- Media Queri.es, a website showcasing sites built with responsive designs.
- Mobile First, Luke Wroblewski’s manifesto that we should build our sites to work well on mobile platforms first, then progressively enhance them to work on desktop browsers.