Shopify themes, liquid, logos, and UX
Hi,
I have embedded a Google Form into my Shopify page, but it adds an extra scroll bar to the page when it is on a smaller mobile screen. How do I make my form so it is the whole length on both Desktop and Mobile - without the secondary scroll bar?
https://www.quiztrail.co.uk/pages/favourite-place-prize-draw
Hi @quiztrail,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.
#shopify-section-template--24360276787576__main {
--section-padding-top: 28px;
--section-padding-bottom: 28px;
}
.responsive-iframe-container {
position: relative;
padding-bottom: 100%; /* Adjust for form's height */
height: 0;
overflow: hidden;
max-width: 100%;
}
.responsive-iframe-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
Hi CodingFifty,
Unfortunately the second scroll bar is still showing even though I have added this code. Do you know why it isn't working for me?
Thank you.
2m 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, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025