Write the media rule to target a typical smartphone device a

Write the @media rule to target a typical smartphone device and configure the nav element with width set to auto

Solution

You see CSS3 comes with the great power to display the same website on IPhones and on Android devices. Ok when you talk about media types in CSS3 the media type will let you to specify a type of media on the target side.

By using Media you can actually check the device width and height irrespective if it is Mobile or desktop.

Now rule goes as

@media only screen

{

#navigation

{

float : none;

width : auto;

}

}