Comm 328 Responsive Web Design

Media Query Exercise 2

The document above is an unstyled version of the first chapter of Alice's Adventures in Wonderland. You saw this same document in the examples for CSS layouts with floats.

Create three layouts using a Mobile First approach

Using a mobile first approach and media queries, create three different layouts for this document. The layouts should rough correspond with small, medium, and large screen sizes.

To do this properly you will have to looks at the content and think about how it should display at each size. Where should the chapter list go? How should the story be displayed?

You may need to also alter the HTML slightly by adding elements for styling or perhaps moving a block around in the document order. That's okay.