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:
Can anyone assist?
Yours,
Michael
A user is experiencing an issue where an embedded Google My Maps doesn’t display at full width on their desktop site (shop.ivansherbs.com), though the AMP version works correctly.
Proposed Solution:
Another user suggests adding custom CSS code to the theme.scss.liquid file targeting the map iframe with width and height set to 100% for screens wider than 768px.
Complications:
theme.scss.liquid fileStatus:
A third user asks if the same solution would work for the Dawn theme for their embedded Google Map responsiveness issue. The discussion remains open with no confirmed resolution for either the Debut or Dawn theme implementations.
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:
Can anyone assist?
Yours,
Michael
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
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
Would this work for the dawn theme? I’m trying to get my embedded Google map to be full width/responsive.