Element causing horizontal scroll

The yellow announcement banner slides in from the right side of the page with page loading. No problem there. I’m having trouble with the width. It’s creating a horizontal scroll… I would set a maximum width on the announcement banner, but I would like it to scale well with different devices. Should I just set the max width for each device/breakpoint? There has to be an easier way, right?

I’ve tried placing it inside of the News Snippets Div and turning off the Overflow visibility, but that didn’t seem to do anything.

Any help would be appreciated!


Here is my site Read-Only: https://preview.webflow.com/preview/womenesports?preview=54a6f25d99d00b7450752a92787f89b4

Hello @rogcait

Be careful with your overflow elements:

This article can help you understand what is happening:

1 Like

Thanks so much for the reply. I actually just figured out what was going on… it had to do with the absolute positioning of the announcement bar. I needed to position it to the Top Right and remove the Left margin. I made the Right margin -30 to match the Interaction’s X-axis movement (which is also -30).

As you can see, it works well without any overlap now: http://womenesports.webflow.io/

Your solution would have worked great, except that I wanted the announcement bar to stretch all the way across to the right side of the page. :relieved:

I’m not sure if there’s better way to do this still… but it seems to work ok for now. Now I need to fix the sliver of margin that appears when I mouse over it. But progress is progress.