DEV Community

Cover image for CSS: How to make a website responsive
Lorenzo
Lorenzo

Posted on • Edited on

19 6

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:
Alt Text

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

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

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 
  }
}
Enter fullscreen mode Exit fullscreen mode

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 🚀


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!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (4)

Collapse
 
ajulio761 profile image
Julio Andre

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

Collapse
 
lorenzoblog profile image
Lorenzo

Thanks for telling me. Changed!

Collapse
 
ajulio761 profile image
Julio Andre

Thanks for your articles, helped me so much!

Thread Thread
 
lorenzoblog profile image
Lorenzo • Edited

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).

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more