Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an 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!
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!
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.
This is an 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!
Thank you, Thirtycoders. That worked perfectly. 🙂
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025