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

Store Design
, ,

Topic summary

A user embedded a spreadsheet via iFrame in their Shopify Dawn theme page but needed it to extend beyond the default 1200px page width to fill the entire browser window.

Initial Solution Attempted:

  • Modifying the iframe element directly in base.css only expanded it to the theme’s standard page width, leaving blank space on either side.

Working Solution:

  • Target the .page-width.page-width--narrow.section-template--[ID]__main-padding container class in base.css
  • Set max-width: fit-content !important and height: 100vh
  • This allows the iFrame to break out of the constrained page width container

Outcome:
The solution successfully made the iFrame full-width across the entire viewport. The user confirmed it worked perfectly.

Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

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

2

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!

3

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.

findateacher.jpg
findateacher.jpg1004×558 81.8 KB

4

@iRest Paste this code in base.css

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

Result:

thirtycoders_0-1714770338004.png
thirtycoders_0-1714770338004.png1355×636 50 KB

Thanks!

1 Like
5

Thank you, Thirtycoders. That worked perfectly. :slightly_smiling_face:

1 Like