google My maps is not full width

Highlighted
New Member
2 0 0

Hi,

 

The maps from Google my maps doesn't load in full width on my desktop site: shop.ivansherbs.com

The AMP verison works fine, and is the same code: m.ivansherbs.com

 

Here was the Custom HTML that I used: 

 

 

<section id="map" class="map">
        <iframe src="https://www.google.com/maps/d/u/1/embed?mid=1dbPtnz8oaiIwUZkpEv31XFWvv88ZdiAV" style="border:0" allowfullscreen=""></iframe>
    </section>

 

 

Can anyone assist?

 

Yours,

 

Michael

0 Likes
Highlighted
Shopify Partner
443 45 65

Hi @michaelkizoch ,

Add the following code to theme.scss.liquid file

@media only screen and (min-width: 768px) {
section#map {
height: 726px !important;
}
}
section#map iframe {
width: 100% !important;
height: 100% !important;
}

 

Let me know if you need help with anything else.

Cheers :))

Umair Abbas

If helpful, please Like and Accept Solution
Want to hire me?
Contact Me At
WhatsApp or email me at umairabbascs@gamil.com
Hire me for 1) Theme coding 2) PSD to Shopify 3) Store optimization 4) SEO 5) Store setup 6) and more!
1 Like
Highlighted
New Member
3 0 0

Hi @UmairA 

This is still michael (too many email accounts).

I wished to try your solution but I dont have a theme.scss.liquid file.

I am using Debut, and I just noticed this: https://prnt.sc/uld8qt

Perhaps the Growave integration is not relevant, but thought I should mention it to be safe.

 

Thanks for your help,

Yours,

Michael

0 Likes