How to keep text from spilling out

working on my tribute page, the header resizes …ok, but the font spills over the box when it is sized down. i cant for the life of me remember how to simply make them resize nicely together. i would put it here for you to look at but i don’t know how :see_no_evil:

Can you share your project on CodePen?

how do i do that?

sorry first timer here

  1. https://codepen.io/
  2. image
  3. Copy code into the appropriate areas:
    image
  4. Click Save
    image
  5. Copy and paste URL here
    image

asjdkasjdfj omg! so simple
https://codepen.io/EdoctheFirst/pen/oKxBNV?editors=1100

#div-1 {
  max-height: 100px;
}

This limits the rendering of the container for your text which becomes noticeable when text is forced to wrap. If you remove that declaration, your container can respond to it’s content. Or you can hide your content:

#div-1 {
  overflow: hidden;
}

You probably do not want to do that. Another trick you might find useful down your development journey, is using viewport values (ie: viewport width [vw] & viewport height [vh]) to force your text to maintain the same size regardless of screen width:

#div-1 h1 {
  font-size: 5vw;
}

Though your concern is contained to that region of your declaration, I noticed you have some unnecessary declarations that will confuse/distract you.

Elements have default visual styles in a web page and you will learn which ones come with what. A <div> for example does not come with any padding or margin and so padding: 0px; and margin: auto; are not needed.

most of that i think is my attempt at getting it to look like i want, this is the first one ive made myself without any skeleton code in place already. its such a learning curve lol. good tip.

Indeed. Then it’s most appropriate to share this piece of wisdom with you before you set too far down the path of frustration:

Mastering CSS is knowing where and how to force it to bend to your will.

BAHAHAHA so true!!

Thanks so much for your help it is working now! woot woot