IFRAMEs & Webflow

Best Practices for Mobiles

Overview
Using IFRAMEs
Working with IFRAMEs
100
Styling IFRAME contents
101
Targeting an IFRAME with Links
102
IFRAMEs & Mobile Devices
Testing Your IFRAMEs on Mobile Devices
201
Best Practices for Mobiles
202
Advanced IFRAMES
Sizing IFRAMEs Dynamically
401
IFRAME Embedding Your Site inside Another Site
402
No items found.
Published
November 9, 2022
Updated
in lightbox

Use Pop-Up Views on Mobiles

If the service you're embedding has a pop-up ( lightbox-style ) version of their embed, that will usually work best on mobile.

The reason is simple.

Mobile displays are small, and those widgets need every possible pixel in order to display their forms and UIs. If you have even a few pixels of margin around an IFRAME embed, that can break everything.

Use Webflow's Breakpoints to Support both View

Using breakpoints, you can create both inline and pop-up versions of the same widget in your website.

Create one that's inline, for your desktop & tablet users, and one that's a pop-up for mobile landscape & portrait users.

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.