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.