DEV Community

Cover image for Responsive CSS Width
Abdulqudus Abubakre
Abdulqudus Abubakre

Posted on

65 12

Responsive CSS Width

Have you been writing CSS and you had to use media queries just so your website could look good across all devices? Well, the good news is, you don't always need media queries.
This series would be focused on various CSS tricks you could use to make your site responsive without using so much media queries.

In this article, we would be looking at how you can make the width of a particular element resize automatically without having to write several media queries.

Here's how you can go about it:

.container {
  width: 1200px;
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Basically, we're saying the container element should have a width of 1200px but at no point should it exceed the maximum width of the parent which is 100%. So if the parent has a width greater than 1200px, the element would grow to 1200px, but if the parent is less than 1200px, the element would only take up 100%.

Let's use this knowledge to create a container class that will house the content of our application.

.container {
  width: 1200px;
  max-width: calc(100% - 20px);
  margin: 0 auto;
  padding: 0 10px;
}
Enter fullscreen mode Exit fullscreen mode

In this case, we added a margin of 0 auto which would center the element horizontally on the page, and also a padding of 0 10px which would add spacing within the element on the left and right side. You might have noticed the change in our max-width property. We're doing this to account for the padding we added to the element. The calc(100% - 20px) is telling CSS to subtract 20px from the 100% and setting it as the max-width. Without this property, the total width of the element when the parent is less than 1200px would become 100% + 10px padding on the left + 10px padding on the right.

With this, we have a container that looks good on small devices and does not exceed a 1200px no matter how large the screen size which is good.

Here's a codepen link showing how it would in code.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (5)

Collapse
 
david_luff_6d22e2f3a1df4f profile image
David Luff

Excellent post. Now to put it into practice. Thanks, bro.

Collapse
 
jp3492 profile image
jp3492

I highly recommend adding css clamp to this post and if you want to exceed the beginners conventions, you have to cover css units (em, rem, ch,...)

Collapse
 
damilolaaaron profile image
dAMi

This is helpful. Thank you Abdulqudus

Collapse
 
oasido profile image
Ofek Asido

Came across this trick today, thank you!

Collapse
 
junior_x profile image
Abdur-rasheedidris19

Great I came across a project today and it didn't have a single media query bt the responsive was still showing for mobile devices.... Nice post bro

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Instrument, monitor, fix: a hands-on debugging session

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️