CSS: How to make a website responsive

#css #webdev #tutorial #codequality

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 🚀

Article No Longer Available

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!

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now