Issue with scrolls showing after adding an iframe

Design help Custom code
1

Hello, would be grateful if someone can help me with this issue i have with my iframe.

I add an iframe with width and height set to 100%. On preview it looks great:

unnamed (2)
unnamed (2)3336×1698 802 KB

But when I look at it after it is published, there is a scroll bar on the sides:

unnamed (3)
unnamed (3)3360×1764 824 KB

Is there anything I did wrong and how do I make sure there is no scroll on the sides. This is the link to that page:

Here is my site Read-Only:
https://preview.webflow.com/preview/theredmarker-project?utm_medium=preview_link&utm_source=designer&utm_content=theredmarker-project&preview=77faf4429e1d7dac70d87f43f050bcd4&pageId=60af091a6bb729a839b023c9&workflow=preview

2

Hi @Kyler_L !

Try setting the overflow of on your Div Block 20 to Hidden. This will hide any content that goes beyond your container. It looks like there is a little bit of extra space on the bottom which is causing this issue.

Also, while the above will remove all the scroll bars, I also recommend changing the width measurement on your Div Block 20 from 100vw to 100%. If content ever has a vertical scrollbar, in order to achieve true 100vw, the browser will add a horizontal scrollbar to account for the vertical one.

image

1 Like
3

Hi @Drew_Schafer, thank you for helping me out. I just followed your instructions and the scroll bars are gone.

1 Like
4

Awesome! Great to hear. :raised_hands: