Embedded maps not responsive

Design help General
1

Hi Webflow Community,

Could someone please help me make my embedded maps responsive depending on the screen? Currently the middle map overflows the right hand side map (it is not centered) in the Desktop view and in the mobile view, none of the maps is responsive (ie. they stay static when I change the width of the screen).

Thanks so much in advance!

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hi there,

Here’s how to make your embedded maps responsive:

For custom Google Maps embeds:

  1. Set both width and height to 100% in the embed code
  2. Use the Style panel to set your desired width and height values
  3. Ensure the parent container uses percentage-based widths (like 100%) to prevent overflow

For Webflow Map elements, you can control responsiveness directly through the Style panel using the Size and Position settings.

Remember to test your design across different viewport widths by resizing the Designer canvas to ensure proper responsiveness.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

1 Like
3

Hey Roman, don’t forget to share your readonly link.

1 Like
4

Thanks, I’ve shared it above, but please also see it below. I still can’t make the maps responsive and avoid overlapping. Will appreciate your help.

Thanks in advance,

Roman

1 Like
5

Thank you. I’ve followed your instructions, but the problem is still there. Will appreciate someone’s help. A readonly link below.

Thanks so much

1 Like
6

A few things;

  • I’d replace your 3 columns with a 3-col grid
  • Wrap each of the 3 locations in a DIV
  • Replace the Container inside of your location cards with a DIV

That fixes a bunch of things in relation to intrinsic element CSS and gives you a cleaner starting point.

Then for the middle map, edit the code and set the width to 100%, it’s currently different than the other two.

See where you’re at after that.

Mainly you’ll change your grid config to 1 col at mobile landscape. so they run vertically.

I’d recommend using classes with those embeds better as well so you can e.g. change the height consistently at lower breakpoints.

1 Like
7

Thanks so much Michael. DO you mind having another look please? While the maps are responsive in the desktop and tablet views (where they are placed horizontally), they are not responsive in the mobile (L) and mobile views as they are still placed horizontally and not vertically). I am missing something from your instructions above. Please look at the top 3 maps. The ones below are from the previous setting that I will eventually delete.

Thanks,

Roman

1 Like
8

This might help you see the structure more easily-

1 Like
9

Awesome, many thanks again. Fixed now. Your video helped a lot! I also renamed the containers that made the the setting clearer and managed to fix it. Once again thanks so much :)

1 Like