How can I fix the width issue on my embedded Google map page?

Store Design
1

I’ve added a mymaps.google embed into my site and made a hash of the page now. Please can anyone help?

I was trying to centre the map to tidy it up and not have it bleeding off the page.

The page width is now much wider than the other pages which makes it look awful.

I tried some css code that I found online which works when I add it to my map page section but when I try to save it, I get an error message in red pop up that says: “Online Store editor session can’t be published”

https://www.undocandles.com/pages/undo-map

This is the code that works but won’t save:

.map-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .map-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; }

2

Hi @Han23 ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

.rte .map-responsive > div {
    max-width: 100%;
    position: relative;
    padding-top: 52.1%;
    height: auto !important;
}
.rte .map-responsive > div iframe {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}

PageFlyRichard_0-1677772697679.png
PageFlyRichard_0-1677772697679.png404×505 103 KB

I hope it would help you
Best regards,

Richard | PageFly

3

Hello @Han23 ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677817581149.png
GemPages_0-1677817581149.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677817603955.png
GemPages_1-1677817603955.png1413×873 71.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team