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 100% width and responsive padding for aspect ratio (e.g., 56.25% for 16:9).
- Set the iframe to width: 100% and height: 100%, remove fixed pixel dimensions, and use position: absolute inside a relative container.
- Ensure no fixed dimensions are set at mobile or tablet breakpoints, and test responsiveness on real devices or emulators.
Interactive map embeds not scaling properly on tablet or mobile devices are often caused by fixed container sizes, missing responsive settings, or incorrect aspect ratios.
1. Use a Responsive Embed Container
- Select the embed element that contains your map (usually from an Embed or an HTML Embed block).
- Wrap the iframe in a div block, and set that div’s width to 100% and a fixed aspect ratio using padding (e.g., 56.25% for a 16:9 aspect ratio).
- Allow the iframe to fill the container using width: 100% and height: 100% in the Embed custom code.
2. Set Embed Width and Height Properly
- In your embed code, remove any fixed width and height defined in
pxinside the iframe tag. - Use style="width:100%; height:100%" or similar within the iframe so it resizes with its container.
3. Use Relative Sizing and Positioned Containers
- Make sure the parent div block is set to “relative” position, and the iframe inside is “absolute” positioned with
top: 0; left: 0; width: 100%; height: 100%. - This ensures the iframe expands to match the responsive padding box.
4. Check for Viewport-Specific Overrides
- In Webflow’s Designer, go to Tablet, Mobile Landscape, and Mobile Portrait views.
- Make sure the embed container is not assigned a fixed width or height for those breakpoints.
- Set Max Width to 100% and remove any min-width constraints that prevent scaling.
5. Test Real Devices or Emulators
- Use Webflow's built-in preview across breakpoints, but also test on actual devices or browser dev tools (Device Mode).
- Some iframe embeds may appear fine in Webflow preview, but break on actual mobile browsers due to how scaling is handled.
6. Consider Using a CMS-Friendly Embed
- If you’re dynamically embedding maps (e.g., using CMS), ensure map URLs are clean and don’t include static width/height parameters.
- Adjust
<iframe src="...">in CMS to addwidth="100%" height="100%"or embed maps without size constraints.
Summary
To fix scaling issues with interactive map embeds on tablets and phones in Webflow, wrap the embed in a responsive container, use relative sizing, and remove fixed dimensions in your iframe. Confirm settings at all breakpoints to ensure mobile responsiveness.