How to set iframe to full page width?

Hello all, I am curious if someone can guide me on how I can set an iframe to full page width? When I adjust the width of the iframe manually it only extends to the right, but not the left of the screen. I don’t want any padding on either side, just the iframe to be full width of the page. Thanks!

Most probably, your iframe is inside a container element which has limited width and centred on the page.

in this case you can try these style rules on your iframe:

margin-left: calc(50% - 50vw);
width: 100vw;

But it would be best if you can share a (preview) link to the actual page you’re working on.

Thanks Tim, I tried inputting the code but no luck. Here is a link to the page https://968682.myshopify.com/. You can see iframe underneath the image banner. The site isnt live so not sure if you can view it. Let me know. Thanks a lot!

Anyone?

No, I can’t see it if it’s not published, You need to share either storefront password or preview link.

@tim_1 Hey Tim, here ya go. Thanks! https://9iy4vcpp2t2enjwx-77885407544.shopifypreview.com

It actually doesn’t even need to be full width, Just the width of the “featured products” at least.

link did not work :disappointed_face:

Hello @AboveTheSun ,

Please share the password of your store so we can check the issue. You can find the password by following the steps:

Go to Online Store → Preferences → Scroll to the Bottom of the page → Password protection.

Most probably, the iframe is not adapting to the full size of the screen width because it is inside a section that has page width or container class; either remove this class or share your password so that we can share a code for the same.

If you need more help on this, please let us know.

Regards,

CedCommerce

Hi @Cedcommerce thanks for replying. The password is tiewer. Looking forward to hearing back from you!