HTML and CSS Reference
Modifying the Chapter4 Site
To demonstrate these techniques, you'll add some additional style rules to the site that you built in Chapter 4 .
You'll use media queries to selectively apply these styles based on the width of the window.
■ The Chapter 4 site was created using the Web Matrix application. However, the source code download pro-
vides this as both a Web Matrix project as well as a Visual studio project. You'll find these in the Chapter 4 folder. You
can use whichever you prefer. The instructions will tell you how to modify the Default.cshtml file. if you're using
Visual studio this will be the Index.cshtml file, the changes are identical in both files.
Open the Chapter 4 project and run the application. Use the Chrome browser as it supports all of the styling
features that were demonstrated in Chapter 4 . Try shrinking the width of the browser window. Notice that the
page does not scale at all; the browser simply clips whatever does not fit in the window. That's your first clue that
you have some work to do. Web pages should be fluid and adjust to the window size.
Configuring the Medium Layout
The current layout of your web page is based on a relatively large window such as a desktop browser. When
designing a web page, you should also consider the appropriate layout for smaller devices. I suggest creating
a separate design for very small resolution devices such as a typical mobile device. In this chapter you'll use
media queries to implement small, medium, and large configurations. However, the medium layout is often a
compromise between small and large. Starting with a large layout and then designing the small layout usually
Scrolling horizontally is not intuitive and should be avoided if at all possible. So if you have a narrow
resolution you should stack elements vertically. The aside element, for example, will need to go to the bottom of
the page. You might consider eliminating the images or changing the font sizes.
Once you have a small layout in mind, you can gradually introduce these changes as the width shrinks. The
approach I like to take is to gradually start shrinking the width of the browser window and see what breaks. Then
make the corrections to deal with that and try shrinking it some more. With the small layout already designed,
you'll know where you're going as you make adjustments in this iterative process.
Now you'll define the style for the medium and small layouts, starting with medium. On medium-sized
devices, you'll use the same basic layout but just shrink some of the elements. For this site, medium will be
defined as widths between 600px and 940px. The size of the web page is 940px so if the window is wider than
that, no adjustment is necessary. The 600px minimum size is somewhat arbitrary. I'll explain how I arrived at that
The medium layout needs little adjustment. You'll use a simple trick of defining the elements with relative
sizes. This allows them to automatically shrink or stretch as the window is resized. Open the Default.cshtml file
and add the rules shown in Listing 6-1 to the existing style element. Add this after all the existing rules.
Listing 6-1. Defining the medium layout
@@media screen and (max-width: 940px)