Absolute Positioned Element Causing Side Scroll

Hi Everyone,

I’ve been having a lot of trouble with this for a while now and can’t figure out how to fix it for the life of me.

I’ve created a custom animation for a client’s portfolio website, so that as you scroll, the portrait photo of him changes, along with the text beside it giving his introduction. I think its a good way to keep the amount of content on the page minimal as he gives the introduction.

My issue is that, as I make the window smaller on the live site, the breakpoint to tablet doesn’t kick in when it should, instead, the text goes off the right side of the page for a bit, causing side scrolling and issues with certain devices.

I think this is because the text containers aren’t being contained by their parent element (class: Text Container Parent). The breakpoint change is only triggered when the parent element hits the side of the screen, meaning half the text goes off the screen before it kicks in.

Below, I’ve left a link to a video of what I’m talking about, and some screenshots highlighting the parent divs behaviour using inspect. If anyone can figure this out for me I’d be very grateful, thanks very much for your time!

Video:

Read only:
https://preview.webflow.com/preview/habit-701?utm_medium=preview_link&utm_source=dashboard&utm_content=habit-701&preview=7278d77c4e1adcda634d69793fde620e&mode=preview

Live:
https://habit-701.webflow.io/