Styling for mobile

In this example, I provide both starting and ending files. Your mission is to approximate the end result (shown in the image below) using your knowledge of CSS-3. Do not use any classes or identifiers in your HTML. Use only the starting HTML provided. How close can you come to the result below? Obviously you will need to adjust the width of your browser to approximate the view below. Note also this will work in Mozilla and WebKit based browsers only at this time. Note that display:block is used to force the anchor to expand to encompass the entire width of each list item (people don’t often click directly on the words on a mobile application).

End Result of styled list

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Peek at the source code if you must, but try to duplicate this as closely as you can using the knowledge you have gained so far.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.