Let's start by seeing what effect our CSS for tablets has had on our full home page on 480px-wide screens, for example phones in landscape orientation, as shown in the following screenshot:
I don't know about you, but I think that looks pretty good. The Search widget actually looks better at this width, because the button drops below the input box, filling some of that empty space. The map is small, but remember that people viewing the site on a smartphone will be able to tap on that map and it will take them to the location page or to the Maps application on their phone.
The only niggle is the fact that the Search button is right up against the input box above it, and could do with some breathing room. So let's write the CSS to make that happen. Perform the following steps to do so:
1. First, we will find the media query for this screen width as follows:
/*smartphones in landscape mode*/ @media screen and ...