Webflow sync, pageviews & more.
NEW

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 iframe in a div with a defined aspect ratio (e.g., 16:9) using padding-bottom or CSS aspect-ratio.
  • Remove hard-coded width and height from the embed, apply width: 100% and height: 100%, and adjust styles for all breakpoints using Webflow’s Designer.

Interactive map embeds often don't scale properly on smaller screens because they are either fixed-width or lack responsive sizing. Here’s how you can fix this in Webflow.

1. Use a Responsive Embed Element

  • Instead of using a raw HTML embed, use Webflow’s Embed element from the Add panel.
  • Wrap the embed inside a div block and give that div a percentage width (e.g., 100%) and a relative position.
  • Add an aspect-ratio style to that wrapper div (e.g., 16:9 using padding-bottom method or with CSS aspect-ratio property if supported).

2. Apply Flexibility to Width and Height

  • In the Embed code, remove any hardcoded width and height attributes.
  • Instead, use CSS styles like width: 100% and height: 100% within a parent container that defines the aspect ratio.

3. Set a Specific Aspect Ratio for Mobile

  • For mobile and tablet breakpoints, make sure the wrapper maintains a usable size:
  • Use a padding-bottom trick (e.g., 56.25% for 16:9) on the wrapper div to maintain aspect ratio.
  • On Webflow, you can do this by setting a padding-bottom on a relative-positioned div, and the embedded map inside gets absolute positioning with full width and height.

4. Adjust Styles for Breakpoints

  • Use Webflow's breakpoint controls to ensure that on Tablet, Mobile Landscape, and Mobile Portrait, the wrapper and iframe adjust correctly.
  • Verify this using the Preview mode in each breakpoint.

5. Double-Check Embed Code

  • If embedding a Google Map, ensure the iframe includes flexible parameters, or modify existing ones:
  • Remove style="border:0;" width="600" height="450" from iframe.
  • Replace with styles controlled in Webflow’s Designer panel.

Summary

To fix map embeds not scaling on mobile, wrap your iframe inside a div with a defined aspect ratio and use percentage-based widths and height via CSS. Remove any hard-coded pixel sizes in the embed and verify scaling in all breakpoints using Webflow Designer.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I customize the styling of widgets from Rock Gym Pro in Webflow, including fonts, colors, and alignment?
Why do I keep getting a "must be a valid video URL" error when entering video links from YouTube or Vimeo into the video link field of my CMS in Webflow? I've tried suggestions from previous closed tickets but the error persists. Even video links that work fine on the sample pages fail when entered into my CMS. The error appears as soon as I enter any text in the field. Any insights on how to resolve this issue?
How can I add tags or other form fields to requests when connecting Mailchimp to Webflow using Logic? I need to segment the audience signing up on my website. I have tried different permutations, but it hasn't worked so far.
Is there a way to add anchor links to specific paragraphs in a blog post on Webflow without using ID's and creating sections?
How can a multi-language blog be created using Webflow CMS with only one CMS Collection Page for "post"?
How can I make the hero section in Webflow fill the browser viewport perfectly regardless of the height of the browser window?
Why does the font change when viewing the published state of my SVG image imported into Webflow? It is supposed to be an image, not an actual font. Any suggestions?
Have any of you ever programmatically set up Webflow pilots after sending a form submission to a custom endpoint? If so, do you have any pointers to save me research time? Thank you!
What could be causing my lottie animation not to appear when I drag and drop the file into the Webflow canvas? I have installed the Bodymovin plugin and set up my After Effects preferences correctly, but still no luck. Additionally, I have set up the After Effects file with a RGB + Alpha for a transparent background. Could this be the issue?
How can I set up Google Ads conversion tracking tag in Webflow?
Can anyone provide recommendations and guidance on setting up and testing a reverse proxy with Amazon Cloudfront for a Webflow project, specifically when the client is not on the Enterprise plan?
How can I prevent Lottie animations from playing on webpage load in Webflow and only initiate when they scroll into view?
What could be causing my placeholder text to be cut off in the latest version of Chrome for the simple form at the bottom of my Webflow site?
Does Webflow support Bootstrap?
What is the process for adding Segment to Webflow?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
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?