CSS: How to make a website responsive

Hello World! The third episode of the series - A CSS/JS trick in 5 minutes - Last Article was about a CSS trick (How to make a gradient animation).
This time I want to show you another CSS trick: How to make a website responsive (or how media queries work).

---

It's not very difficult, I just want to underline some important things. First, when you want to do something responsive always use Google device toolbar while having this in mind:

Then you add a media query for these 5 different screen sizes:

@media only screen and (max-width: 1200px) {
  body {
    // Change design here 
  }
}

I recommend you start copying your 5 media queries and then editing one at once. Remember to check frequently your website to be sure of what you're doing.

---

You can also use media queries to check screen resolution (in dpi) and orientation.

@media (orientation: landscape / portrait) {
  body {
    // Change design here 
  }
}

@media (resolution: 150dpi) {
  body {
    // Change design here 
  }
}

---

I created for example a responsive title here:
Click Me

---

Hope this helped and thanks for reading!

Please smash that like button to make me understand that you want the series to continue :)

---

Check this article: The ultimate compilation of Cheat sheets (100+) - 🎁 / Roadmap to dev 🚀

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

DevLorenzo ・ Mar 2 ・ 17 min read

#productivity #webdev #beginners #javascript

---

Subscribe to our newsletter!

A loooong, and fun, weekly recap for you
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!

Comments

[Julio Andre]

Hi, I think there is an error with the content. :(

[DevLorenzo]

Thanks for telling me. Changed!

[Julio Andre]

Thanks for your articles, helped me so much!

[DevLorenzo]

Thanks to you.
Don't hesitate to follow me or to leave a like in my latest articles. You would help me a lot (I'm trying to reach the top 10).

The ultimate Cheat sheets compilation (200+) - 🔥🎁 / Roadmap to dev 🚀

DevLorenzo ・ Mar 2 ・ 15 min read

#productivity #webdev #beginners #javascript