Heading text cuts off on small devices

Bootstrap Studio Help
1

I’m running into an issue where the heading text in my header cuts off on small devices and forces you to scroll to the side if you want to read it.

header-cutoff
header-cutoff374×617 323 KB

I’ve been playing around with settings hoping I could get this to un-break but no luck so far - here’s the (now probably over-complicated …) HTML:

<div style="height: 500px;background-image: url('bg-skulls.webp');background-position: center;background-size: cover;">
    <div class="container fs-1 d-flex d-xl-flex flex-column justify-content-end align-items-start flex-wrap justify-content-xl-end align-items-xl-center" style="width: 960px;height: 100%;font-family: Bitter, serif;">
        <h1 class="d-flex justify-content-start align-items-end flex-wrap" style="color: var(--bs-body-bg);font-size: 71px;font-weight: bold;text-shadow: 4px 4px 4px var(--bs-emphasis-color);position: sticky;overflow: visible;display: block;">Fake Name Here</h1>
        <p style="color: var(--bs-secondary-bg);background: var(--bs-emphasis-color);padding: 12px;">Office Professional + Designer for Print &amp; Web</p>
    </div>
</div>

It works as intended at larger sizes (see the second line wrapping):

header-cutoff
header-cutoff774×619 78.8 KB

Please let me know if any other info would be helpful.

Thanks in advance for any help!

2

You have hard coded the width of the element to be 960px in your container. You’ll probably want to remove that part.

If you want it to be 100% the screen width, add the class “w-100” to the container if it doesn’t default to 100% width.

1 Like
3

Oh jeez, thank you, that did it! Appreciate your time and help!