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.
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 & Web</p>
</div>
</div>
It works as intended at larger sizes (see the second line wrapping):
Please let me know if any other info would be helpful.
Thanks in advance for any help!