How to make the following div responsive?

HTML code :

<div class="hero__content">
          <span class="odd">l</span>
          <span class="even first">a</span>
          <span class="odd">s</span>
          <span class="even">t</span>
          <img src="./images/girl.svg" alt="girl">
 </div>

<div class="hero__content">
          <span class="odd">l</span>
          <span class="even first">a</span>
          <span class="odd">s</span>
          <span class="even">t</span>
          <img src="./images/girl.svg" alt="girl">
 </div>

8 Replies

Tok124 (CSS Nerd)•2y ago

I think as long as you don't have a fixed width on your div, it will be responsive. you could use for example max-width:500px; or whatever. But, the text would eventually overflow the div. so to prevent this, you could use font-size with clamp. The best tool to generate a font-size with clamp that i have found is https://clamp.font-size.app/

Font-size clamp() generator

Generate linearly scale font-size with clamp()