Hi, this code isn't working in my Shopify page embed to fill the space. I'm still getting an inner scroll bar and only 2 image column width. I also tried maximizing the width this way as well, but still no go:
"<div style="overflow: hidden; width: 100vh; height: 100vh;"><iframe src="https://pollunit.com/polls/XXXX?embed=1&embed_options[disable_remote_overlay]=1&embed_options[kill_title]=1" style="width: 100% !important; height: 100% !important; border: none;" allowfullscreen="" frameborder="0"></iframe></div>
"
It’s difficult to diagnose the issue on your Shopify page without direct access.
In general, an <iframe> is considered a block element, which means it automatically takes up the full width of its parent element. In your case, it should be as wide as the <div> in your example. However, you’ve set the <div> width to 100vh (Viewport Height) instead of 100vw (Viewport Width).
The width and height attributes of the <iframe> control its own dimensions, but it will still be constrained by the parent’s height and width. If the content inside the <iframe> is taller than the <iframe>, the <iframe> will not automatically expand to fit it. I assume this is the scrollbar you see.
If you want the <iframe> to adjust its height based on its content, this cannot be done purely with CSS; JavaScript is required. We have an example of how to achieve this in our embedding tutorial.
