Testing our fluid layout on a smartphone

The most common smartphones have a width of 480px in landscape orientation and 320px in portrait. Let's see how our site looks on phones, now that we've set our media query for screens smaller than 768px, which will—don't forget—affect this screen size, too.

First, we will see our site in landscape mode, as shown in the following screenshot:

Next, we will see how it looks in portrait mode, as shown in the following screenshot:

Ouch. That's not very good, is it?

There are a number of problems as follows:

• The logo is tiny

• The header is dominated by the social media icons

• The call to action button has way too much padding and its text wraps onto a second line in landscape and a third in portrait

• The menu is big and a bit messy looking

• The sidebar is ridiculously narrow, particularly in portrait mode

• The footer text wraps onto two lines and could be tidied up

We'll write the CSS to fix those problems later, but for now let's just set the media queries.