/04-Responsive-profile

Primary LanguageCSS

Setup

We want to put the final touches on our profile page now. If you haven't already, let's copy our previous profile into this challenge's folder and add a CSS file to it:

cp -r ../03-Finishing-profile-design/profile .

Background & Objectives

Make our page responsive with media queries

Your profile is complete, but what happens if you re-size your browser window and make it smaller? Your page is not yet responsive 😱.

If you want a responsive design, you can add media queries in your CSS. To use media queries, you must have this line in the <head> of your html 👇

<meta name="viewport" content="width=device-width, initial-scale=1">

This allows your page to detect the width of the device you are using.

Media queries work a bit like an if statement in ruby. Basically you can define CSS rules that will only apply if the window is smaller than a given width. For instance, if you want a responsive container, you can build it like this:

@media (max-width: 960px) {
  /* For a screen < 960px, this CSS will be read */
  .container {
    width: 700px;
  }
}
@media (max-width: 720px) {
  /* For a screen < 720px, this CSS will be read */
  .container {
    width: 500px;
  }
}
@media (max-width: 540px) {
  /* For a screen < 540px, this CSS will be read */
  .container {
    width: 300px;
  }
}

Try to resize your window to understand how media queries work.

⚠️⚠️⚠️ Be careful with the order of your media queries ⚠️⚠️⚠️

As with if statements in ruby, order matters! If several conditions are true, the last CSS rule will be applied.