Google map out of boundaries in Mobile Version: Narrative Theme

Store Design

Topic summary

A user encountered an issue where an embedded Google Map on their contact page displayed correctly on desktop but extended beyond the right boundary on mobile devices when using the Narrative theme.

Solution Provided:

  • Add CSS code to the theme.scss.liquid file (or Custom CSS in newer themes) to make iframes responsive:
iframe {
    width: 100%;
}

Key Points:

  • The original poster confirmed the CSS fix worked perfectly.
  • For Dawn theme users, the file structure has changed—the solution is to add the code via Theme Settings > Custom CSS instead.
  • An alternative suggestion included using a third-party app (IzyMaps) for automatic responsive handling, particularly useful for multiple locations.

Status: Resolved. Multiple users confirmed the CSS solution successfully fixed their mobile map display issues.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
3

Hi,

Thank you the solution. It worked perfectly.

1 Like