How to add 2 maps in Dawn theme - Custom Liquid

Technical Q&A
, ,

Topic summary

A user is experiencing alignment issues with two embedded Google Maps on their Shopify Dawn theme website. The maps appear outside their container borders, causing layout problems that are particularly severe on mobile devices.

Technical Details:

  • Custom Liquid code contains two Google Maps iframes for office locations
  • Maps display acceptably on desktop despite border overflow
  • Mobile version shows significant layout breaking

Current Status:

  • The user has shared their website URL and the custom Liquid code containing the iframe embeds
  • The code appears to have formatting issues (reversed/garbled HTML attributes in places)
  • No solutions or responses have been provided yet
  • The discussion remains open with the user seeking help for proper alignment across both web and mobile platforms
Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I have added our 2 office locations on my website - using a custom liquid code. But there’s some issue with the alignment - the maps are completely not inside the border! When we see the maps section on the web - it looks okay (even though maps are outside the border) But on the mobile version it’s a disaster! Can someone help me align the 2 maps properly on the web & mobile? Website: https://www.islaseafoods.ae/

This is the custom liquid code: