How can I fix the issue with interactive map embeds not scaling on tablet and mobile devices on my Webflow website?

TL;DR
  • Wrap the map embed in a responsive div with width: 100% and a relative or viewport-based height.  
  • Remove fixed width/height attributes from the embed code, using 100% dimensions instead.  
  • Style the container for responsiveness per breakpoint, using vh units or aspect ratio techniques.  
  • Add custom CSS to force iframe scaling if needed.  
  • Test across breakpoints and real devices for full responsiveness.

Interactive maps not scaling correctly on tablet and mobile devices in Webflow is usually caused by fixed widths, missing responsive settings, or improper embed container styles.

​

1. Use a Responsive Embed Container

​

  • Wrap your map embed (Google Maps, Leaflet, etc.) in a div block.
  • Set the div block’s width to 100% and height to auto (or a fixed vh height like 50vh if vertical space is needed).
  • Apply position: relative to the container if needed for absolute children.

​

2. Adjust the Embed Code

​

  • In the Embed element, if your code has fixed width and height attributes (like width="600"), remove them.
  • Instead, set style tags inline if needed: style="width: 100%; height: 100%;".
  • Ensure Google Maps iframes or other embeds do not have fixed pixel values by default.

​

3. Style the Map Container with Flexibility

​

  • Set your container div’s height appropriately per breakpoint:
  • Mobile: Use relative units like 30vh or allow the height to expand as needed.
  • Tablet/Desktop: Use 50vh or maintain aspect-ratio using padding tricks (e.g., padding-top: 56.25% for 16:9).
  • Avoid setting overflow: hidden unless needed, as this can crop map interactions.

​

4. Add Custom CSS for Responsiveness (If Needed)

​

  • If the map still doesn’t scale, add this inside an Embed element before the closing </body> tag using Webflow's Page Settings > Custom Code > Footer:
  • <style>.map-container iframe { width: 100% !important; height: 100% !important; }</style>
  • Apply the class map-container to the div that wraps your embed.

​

5. Test Across Breakpoints

​

  • Use Webflow's built-in responsive preview to test the layout.
  • Make adjustments per breakpoint, especially for margin/padding or height constraints.
  • Publish and check live across physical devices if possible—some scaling issues only appear on native mobile browsers.

​

Summary

​

To fix interactive map scaling on mobile/tablet in Webflow, wrap your map in a responsive div, remove fixed dimensions in the embed code, and ensure container styles allow scaling using width: 100% and responsive height settings. Use custom CSS targeting the iframe if necessary.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can adsense be easily integrated into a Webflow website like it can be with Wordpress, and if so, can someone direct me to the right resources? P.S. I do not have any other hosting options.
How can I add custom CSS media queries to the Header in the custom code section in Webflow?
How can I create a parent div with 100% width and manually change the height at a specific breakpoint in Webflow, and have an image that covers the parent div as well as a gradient div on top, without using background images? And can you please provide guidance on how to learn these basic concepts in Webflow?
Can I create a branded email address for my client's site hosted on Webflow? If not, what is an alternative solution?
How can I create and style two side-by-side buttons in Webflow without using CSS, so that the template can be updated in Mailchimp and sent to Mandrill without the CSS being overwritten?
How can I create a form in Webflow that allows users to select options from a list and submit their selections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How do I make a contact-slide-in-sidebar scrollable in Webflow on mobile devices? Also, how can I coordinate the actions of two triggers so they don't bug when opening and closing the sidebar?
If I unlink a symbol in Webflow, will the remaining instances of that symbol on other pages still exist as a symbol? I have a footer as a symbol that I need to copy, unlink, and create a new version for a different language as a new symbol. I want the original linked footers to remain as the original symbol while creating a new symbol from one of them.
How can I calculate a value from a number in a Webflow CMS collection, divide it by a fixed number, and use the resulting percentage as the width of a div for each item in the collection? Is there a way to do this without using CSS calc() or jQuery?
How can I keep the same URL for my documents on Webflow consistently, without the platform automatically changing it and without including "Webflow" in the PDF URLs?
Is Webflow the platform used to build the website with a fixed half and scrolling section?
How can I track events in my Google Analytics account using Webflow?
Is it possible to add a form element for handling customer images in Webflow? Can you also guide me on integrating a payment method like Stripe or similar into the form? I'm not very experienced with coding, so any help would be appreciated. Thank you!
How can I improve page load speed on Webflow when embedding Calendly, as it is causing significant slowdowns and affecting animations?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?