Web Design with HTML and CSS

250

The need for mobile-optimized websites

Web Design with HTML and CSS Digital Classroom

In general, mobile design works better with a single column for your content. In the

following steps you will begin to override your existing styles using two methods: removing

fl oats and changing pixel widths to a value of auto. First, however, you will remove the

masthead, which contains the second SmoothieWorld logo.

6 Add the following code (highlighted in red):

#masthead {

display:none;

}

The display:none property prevents the masthead element from appearing.

This property is useful because it deactivates elements from the original style sheet. Now

you’ll confi gure your navigation.

7 Add the following code, which targets the list items in your mainnav div:

#mainnav {

height:auto;

}

#mainnav li {

fl oat:none;

width:auto;

text-align:left;

}

Setting the height value for the mainnav to auto ensures that this container will expand and

display the navigation items inside. Choose File > Save and then upload your HTML and CSS

fi les to your server (if testing on your phone). Load or refresh your page in the web browser.

Your navigation section after removing the

fl oat and setting the width to auto.