Hi! I cannot get my iframed google form to be centered on mobile view. It is centered on desktop. Code:
^^ Desktop View
^ ^ Mobile View
I’ve tried changing the float to left and text to left, but hasnt helped…
Topic summary
A user embedded a Google Form via iframe on their Shopify store, which displays centered on desktop but not on mobile devices.
Solution Provided:
- Add CSS code to the
assets/theme.scss.liquidfile:iframe { width: 100%; height: auto; } - This successfully centered the form on mobile for the original poster.
Follow-up Issues:
- One user reported that while the code worked for centering, it created a scrolling problem—the form became very small and required scrolling within the embedded frame instead of scrolling the entire page.
- Another user with the Dawn theme couldn’t locate the coding files to implement the fix.
Alternative Recommendation:
A contributor suggested abandoning Google Forms entirely in favor of native Shopify form apps (like Shopify Forms or Helium Customer Fields), arguing that using non-Shopify tools creates technical debt and doesn’t align with building a Shopify-native brand. Data would be saved directly to Shopify customer records rather than Google.
Status: The centering issue has a working CSS solution, though implementation challenges and usability concerns remain for some users.
Please share your website URL and password if any. I will check and provide a solution here.
Thanks!
resmrkt.com thanks!
1 Like
Please add the following code at the bottom of your assets/theme.scss.liquid file
iframe{ width: 100%; height: auto }
Hope this helps.
Thanks!
1 Like
It worked! Thanks!
1 Like
Please accept as a solution so others can take benefits.
I added the code iframe{ width: 100%; height: auto } at the bottom of my Assets/theme.scss.liquid
It worked, but now I have to scroll through the Google form as it’s embedded (very small) instead of just scrolling down on the page.
1 Like
Hi Dmwwebartian, I’m having the same issue with my dawn theme but I couldn’t find where in the coding files. Could you please help me?
Thanks
Why force a Google Form to work on your Shopify site when plenty of Shopify Form apps do all of the same stuff?
Looking for a free alternative? Use Shopify forms.
Need more customization? Use Helium Customer Fields. The data is saved to a customer record in Shopify, including custom fields (as customer metafields).
Or use Google Forms. Then later on when your brand is growing you’ll have to untangle the web of non-Shopify apps you’ve strung together.
Using a Google Form on your Shopify store is the wrong move. Full stop.
You’re building a Shopify brand, so build on Shopify. Not Google.