We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Re: iframe container width

Solved

How can I expand an iframe width to fit the entire monitor display?

levon
Tourist
13 0 1

Hi, i've added a custom HTML page in my template, and then added in an iframe. 

https://j4theqdjs4v4xbsf-74866557205.shopifypreview.com

Here is a preview of the site, my question is how do I expand the width of that iframe be as wide as the monitor displaying it, and begin at the top of the page with 0padding and margins etc.

 

iframe code: <iframe src="https://levonkev.github.io/background4/" width="100%" height="600px" frameborder="0"></iframe>

Accepted Solution (1)

made4Uo
Shopify Partner
3877 719 1236

This is an accepted solution.

Hi @levon,

 

Please follow the instructions below to make the iframe wide and on top

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.scss.css file
3. At very end of the code, add the code below

 

div#shopify-section-d27e6cde-c36b-42bd-967a-cf2578609679 .Container, section#section-d27e6cde-c36b-42bd-967a-cf2578609679 {
    padding: 0;
}

div#shopify-section-d27e6cde-c36b-42bd-967a-cf2578609679 .VideoWrapper {
    margin-top: 0;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free

View solution in original post

Replies 4 (4)

made4Uo
Shopify Partner
3877 719 1236

This is an accepted solution.

Hi @levon,

 

Please follow the instructions below to make the iframe wide and on top

 

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.scss.css file
3. At very end of the code, add the code below

 

div#shopify-section-d27e6cde-c36b-42bd-967a-cf2578609679 .Container, section#section-d27e6cde-c36b-42bd-967a-cf2578609679 {
    padding: 0;
}

div#shopify-section-d27e6cde-c36b-42bd-967a-cf2578609679 .VideoWrapper {
    margin-top: 0;
}

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
levon
Tourist
13 0 1

oh wow, this was great and works! However, under my iframe I have the following text when previewing ".element { width: 100%; /* set width to 100% */ }"

https://j4theqdjs4v4xbsf-74866557205.shopifypreview.com

made4Uo
Shopify Partner
3877 719 1236

Hi @levon,

 

The code is entered inside the section. Please go to that section and delete the said code.

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free
levon
Tourist
13 0 1

checked 'theme.scss.css file' and cannot find that code, using ctrl+f