Google map out of boundaries in Mobile Version: Narrative Theme

[ChamanGarg1]

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! 

[KetanKumar · Accepted solution]

@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%;
}

[ChamanGarg1]

Hi,

Thank you the solution. It worked perfectly.

[KetanKumar]

@ChamanGarg1 

it's my pleasure to help us

[rachaelpetal]

Thank you! I managed to fix it 

[garywornell]

Thank you

[Hans_Cowboy]

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

[orestis-z]

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.