Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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>
Solved! Go to the solution
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;
}
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;
}
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% */ }"
Hi @levon,
The code is entered inside the section. Please go to that section and delete the said code.
checked 'theme.scss.css file' and cannot find that code, using ctrl+f