Make it Responsive
Right now our site looks pretty great, but what happens if you change the size of the browser, and make it smaller. Eep. Not great, right? Our sidebar gets pretty squished. Responsive design is essentially making sure your website looks great across all screen sizes. Since so many people visit websites on their phones, how your site looks on a smaller screen is really important.
CSS has something called media queries which we can use to apply different CSS styles when our screen is different sizes. Something that I think would make our site look better on smaller screens is if the sidebar were to sit on top of our main section.
Let’s add a media query that will do this, open up styles.css and add:
Any CSS that you write in between will be applied when the screen size is smaller than 850px.
Let’s make both the
<main> tag and the
<aside> tag have a width of 100%.
Edit your CSS so your media query looks like:
You can apply the same styles to multiple elements using a comma.
We also want to add a little bit of padding to our sections, so edit your media query so it matches this:
Now, change the background-color of your
<main> tag when the screen size
is smaller than 600px.
Your chrome dev tools have a feature that lets you see what your webpage would look like on different phones. See if you can find it, and check what your page would look like on a iPhone 5.