How To Make the iFrame on One Page Full Width in Dawn Theme

[iRest]

I've embedded a spreadsheet in an iFrame on my page. I'm using Dawn Theme and have also created a Template for this page.

Can I add some CSS or perhaps a custom liquid container to make the iFrame on this one page full width?

Here's the page: https://shop.irest.org/pages/find-a-teacher

[thirtycoders]

Hello @iRest,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file -> Save

#shopify-section-template--22638952251668__main iframe {
    width: 100% !important;
    height: 100vh;
}

 Thanks!

[iRest]

Unfortunately, that just makes it the "page width" from the Theme Layout (which is 1200px), but there's still a big chunk of blank space between that and the end of the page (maybe I should call it "window" instead of page?). That's fine for all my other pages and iFrames, but not this one.

Is there a way to make the iFrame on this one page go past that "page width" so that it's the same length as the header? I'm including a screen shot to show where the end of the widow and header is and where the iFrame is actually stopping.

[thirtycoders · Accepted solution]

@iRest Paste this code in base.css

.page-width.page-width--narrow.section-template--22638952251668__main-padding {
    max-width: fit-content !important;
}

Result:

Thanks!

[iRest]

Thank you, Thirtycoders. That worked perfectly. 🙂