Google map out of boundaries in Mobile Version: Narrative Theme

Store Design

Topic summary

A user encountered an issue where an embedded Google Map on their contact page displayed correctly on desktop but extended beyond the right boundary on mobile devices when using the Narrative theme.

Solution Provided:

  • Add CSS code to the theme.scss.liquid file (or Custom CSS in newer themes) to make iframes responsive:
iframe {
    width: 100%;
}

Key Points:

  • The original poster confirmed the CSS fix worked perfectly.
  • For Dawn theme users, the file structure has changed—the solution is to add the code via Theme Settings > Custom CSS instead.
  • An alternative suggestion included using a third-party app (IzyMaps) for automatic responsive handling, particularly useful for multiple locations.

Status: Resolved. Multiple users confirmed the CSS solution successfully fixed their mobile map display issues.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi, I am using the narrative theme and wanted to add the google map location for my retail store in the contact us page of my site.

I used the embed code option in google maps to add it. It is looking fine for desktop version but it doesn’t proportion itself for the mobile version.

In mobile the maps goes beyond the right boundary of the screen.

Here is the contact us page of my website: https://ecoearthclub.myshopify.com/pages/contact-us

Any help is highly appreciated.

Thanks in advance!

1 Like
2

@ChamanGarg1

thanks for it please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
iframe {
    width: 100%;
}
3 Likes
3

Hi,

Thank you the solution. It worked perfectly.

1 Like
4

@ChamanGarg1

it’s my pleasure to help us

5

Thank you! I managed to fix it

6

Thank you

7

Hi @KetanKumar I have the same issue, but i can not find the Asset-> /theme.scss.liquid … anymore did something change ?, I am using the dawn theme

8

For anyone struggling with mobile map responsiveness, here are two solutions:

  1. Quick CSS Fix (for Dawn theme):
    Add this in Theme Settings > Custom CSS:
iframe { 
  max-width: 100% !important;
  height: 400px; /* Adjust as needed */
}
  1. Simpler Alternative:
    I built IzyMaps to handle these responsive issues automatically. It’s a lightweight solution that works with any theme and includes:

  • Perfect mobile responsiveness

  • No coding needed

  • Free basic version available

The CSS solution works great for simple cases, but if you’re managing multiple locations or want more control over the design, the app might save you some time.

2 Likes
9

Thank you very much.