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