My code's not working!

×

  1. Double check all your files are saved.
  2. Check each quote has a pair.
  3. Do all of your HTML tags have a closing tag?
  4. Ask a mentor for help!

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:

  @media  all and (max-width:850px) {
  }

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:

  @media  all and (max-width:850px) {
    main, aside {
      width: 100%;
    }
  }

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:

@media  all and (max-width:850px) {
  main, aside {
    width: 100%;
  }
  section {
    padding-right: 20px;
    padding-left: 20px
  }
}

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.