Why isn't Google My Maps loading in full width on my desktop site?

Topic summary

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:

  • The original poster is using the Debut theme and doesn’t have a theme.scss.liquid file
  • They mention a Growave integration, though its relevance is unclear
  • The conversation includes reversed/mirrored text that makes some details difficult to parse

Status:
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.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.

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

1 Like

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.