Embed content too big for mobile. How to make responsive sizing?

Hi everyone,

I’m having trouble making my embed links resize as the screen size changes on mobile. I want the mobile experience to be good, but no matter what i try, the embed images are just too big. They are iframe links linking to google sheets charts. I know the charts will be small on mobile with the right sizing, but i just want them to not overflow over the screen. I’ve put my embed html inside columns too and they stack on each other in mobile. They’re just too big!

Attached is a screenshot of what it looks like. I’ve tried vw and % on different elements, but have had no luck. Any help is appreciated!


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

Hi @Matt_webflow,

Welcome to the forum :smile:
Can you share a read-only link to your project? this way we can really take a look on what’s going on and find the root of the problem…

Oh yes, sorry @avivtech . Here it is:

https://preview.webflow.com/preview/creditviz?utm_source=creditviz&preview=39c1c00f864b67d681793649b62bdc72&pageId=5c9db477f771acbc234c82d4

Hi Again @Matt_webflow,

I took a look on your project and few things:

  1. Using iFrame is not an easy and very responsive way to display things in general.
  2. If you use iFrame, you might want to change the code to have width:100% instead of constant width.
  3. Generally, your hierarchy and structure are not the best practice. Using columns is less popular these days when we have flex and grid. I suggest to watch some Webflow university videos on Elements, Layouts, Spacing and Sizes. It once you know how these all behave, it will be easier to design a responsive site.
1 Like