Web Design with HTML and CSS

252

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

9 To style the maincontent div, add the following code within your media query:

#maincontent {

fl oat:none;

width:auto;

background-color:white;

}

The key changes here are to set the fl oat property to none and the width to auto.

Save the fi le and then upload your HTML and CSS fi les to your server (if you are testing

on your phone). Load or refresh the page in your web browser.

Your maincontent section also fi lls a single

column after removing the fl oat and setting

the width to auto.

Your content fl ows into a single column and y ou are getting closer to the intended layout,

but your footer is still fl oated.

10 The last section of the page to style is the footer. Add the following rule set within your

media query:

#footer, #footer p {

clear:none;

width:auto;

height:auto;

background-image:none;

padding-top:20px;

margin-top:0px;

}