Web Design with HTML and CSS

248

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

3 Now you will add a new rule that sets a style for the width of the wrapper. Add the

following code (highlighted in red):

@media only screen and (max-device-width:480px) {

body {

padding:5px;

background-color:#FFF;

background-image:url(images/smoothieworld_logo_mobile.jpg);

background-repeat:no-repeat;

}

#wrap {

width:auto;

margin-top:80px;

}

}

Note that throughout this lesson, you are adding new rule sets nested within the media query

section. The syntax here is slightly diff erent than what you have created up to this point; study the

code example carefully, and always add your new rules inside the @media section.

This code accomplishes a few things: the 5 pixels of padding for the body will add a bit

of space to any content you place inside your page, and the background image is a new

image optimized for the mobile format. The rule for the wrap ID style redefi nes the

main container of the page to an automatic width instead of the 960 pixels used for the

current style sheet. Additionally, the top margin property adds 80 pixels of space between

the wrap div and the top of the page, which allows your site logo to be visible.

4 Choose File > Save.

The most reliable way to test this page is to upload the entire site to a remote server

and then point to the resulting link using your mobile phone’s web browser. If you’re

not currently set up for this workfl ow, take time now to set up your remote server, or

preview the page later.