Solved

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

iRest
Tourist
4 0 2

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

Accepted Solution (1)
thirtycoders
Shopify Partner
108 19 24

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:

thirtycoders_0-1714770338004.png

Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com

View solution in original post

Replies 4 (4)

thirtycoders
Shopify Partner
108 19 24

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!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
iRest
Tourist
4 0 2

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

thirtycoders
Shopify Partner
108 19 24

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:

thirtycoders_0-1714770338004.png

Thanks!

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
iRest
Tourist
4 0 2

Thank you, Thirtycoders. That worked perfectly. 🙂