[TIL] Responsive HTML element without media queries

1 min readhtml, css

TIL that it’s possible in CSS to make an HTML responsive (automatically adapt to screen width), without having to use media queries:

<div class="outside-container">
  <div class="responsive-element">
    <p>I'm a paragraph!</p>
  </div>
</div>
.outside-container {
  border: 1px solid blue;
}


.responsive-element {
  border: 1px solid red;
  width: 100%;
  max-width: 580px;
  margin: auto;
}

This is achieved with the combination of width: 100%; and max-width: 580px;, where we’re saying “width be 100% of the parent’s width, but never exceed 580px”. Notice how the element with red border adapts when screen width changes:

I'm a paragraph!

Many thanks to @Ali_Developer05 for the tweet where I got this tip from, and which I’ve been able to use at work the very next day.