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 .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.
As with if statements in ruby, order matters! If several conditions are true, the last CSS rule will be applied.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent