Google Maps size to fit the mobile screen, custom liquid (+ hiding prices from mobile)

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme embedded a Google Maps iframe via custom liquid on their homepage. The map displays correctly on desktop but overflows the mobile screen width.

Attempted Solutions:

  • A CSS fix was suggested (center iframe { width: 96%; } in base.css), which corrected mobile display but made the desktop version too wide.
  • The user needs a responsive solution that applies width constraints only to mobile screens, not desktop.
  • Initial testing in Shopify’s mobile preview appeared successful, but actual mobile device testing revealed the map still exceeds screen width.

Secondary Issue:

  • Product prices appear on mobile despite being disabled in the theme customizer. The user attempted adding price-hiding code to base.css without success, unsure of correct code placement.

Current Status:
The issue remains unresolved. The user is seeking help with media queries or mobile-specific CSS to constrain the iframe width responsively, plus guidance on properly hiding prices from mobile view.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

Hi there!

I have added a custom liquid Google Maps to my Shopify homepage (Dawn Theme), and it looks good on desktop. The problem is that when I change the view to mobile, the Google Maps extends the screen width. How to fix this?

  • In addition I just realized that for some reason my mobile preview shows the prices of the products (which I don’t want to be shown), is there a fix for this as well? I have disabled the prices and they don’t show up when I’m viewing the store from the “Customize” viewpoint.

https://9u9zwo5j56x853yr-76588974424.shopifypreview.com

My custom liquid currently for the Google Maps:

IMG_9389.jpg
IMG_9389.jpg1170×1920 139 KB

.
IMG_9391.jpg
IMG_9391.jpg1170×2179 146 KB

2

You can send me a direct message if you want to?

3

@webbuilder9 Hello,
Please Add This Code Go to the online store > edit code > assets > base.css

center iframe {
	width: 96%;
}

Like This

oscprofessional_0-1693477103734.png
oscprofessional_0-1693477103734.png540×819 153 KB

4

Hello! This code makes the map look good on mobile, but now the map is way too wide for the desktop version. Is there a way to limit this code to apply to only to the mobile screen?

Näyttökuva 2023-8-31 kello 13.44.46.png
Näyttökuva 2023-8-31 kello 13.44.46.png2862×1386 683 KB

Näyttökuva 2023-8-31 kello 13.45.07.png
Näyttökuva 2023-8-31 kello 13.45.07.png736×1340 244 KB

5

Hello! Thank you for the answer, but unfortunately I’m not that pro that I would understand where to post these codes without you telling me. :slightly_smiling_face: The 1st solution didn’t work as I tried to put it on my custom liquid. I also tried to put the price code to base.css, which didn’t work either.

6

Oh sorry I just realized that the Shopify Mobile Preview shows that the map would look fine on mobile, but actually when I click the https://9u9zwo5j56x853yr-76588974424.shopifypreview.com link on my mobile phone and open the webpage, the map still exceeds the width of the mobile screen same as in the beginning.

7

Still not working! Anyone can help me?