We want to put the final touches on our profile page now. If you haven't already, let's copy your profile into this challenge's folder:
cp -r ../03-Finishing-profile-design/profile .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 screen 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.
As with if statements in Ruby, order matters! If several conditions are true, the last CSS rule will be applied.