Make iframe fit into div block


Ive tried getting this to work by myself and forum entries but no success so far. On the right you see a div block in which I want to fit a sendinblue form via iframe. Its important that the form just fits the grid without any scrollbars and of course no content being cut off.

Would really appreciate the help, thanks!

Here is my site Read-Only: [LINK](Webflow - Tradelink-redesign)
(how to share your site Read-Only link)

Hi Maximilian,

I think this is being caused because the custom code for the iframe has a set height of 305px.

iframe width="540" height="305"'

If you set iframe width="540" height="100%", the height of the HTML Embed element to 100% and then set a min height on the Div block that contains it (1000px got everything to fit for me), this should fix it :pray:

I’m not super comfortable with custom embeds myself yet, so i’m not 100% sure this is “best practice” to ensure responsiveness across devices. You may need to have a play around with the setup of the form on SendInBlue for that.

Hopefully somebody can correct me if there’s a better way to do this, but this should at least be a good starting point either way :slightly_smiling_face:

ah thanks for your help Josh but its not quite there yet as I want the form to only fit the size of the grid and not be way larger… Hopefully there is a way to do this! Appreciate it though!

No worries!

Considering the formatting of the form itself is being done by Sibforms, and all you have control over in the custom code is the size of the iframe itself (rather than the elements inside) and its width, margins etc then I think you’ll have to head over to Sibform to make the form smaller/to fit the div you have in Webflow.

I’m not sure how much flexibility their own designer gives, but I notice that Sibforms also allow you to use HTML & Basic HTML embeds instead than iframes, so it might be worth having a play around with implementing it in your project that way. This will be a bit more tedious since you’ll have a lot more custom code to manage, but at least then it’ll give you total control over the design of the form rather than inheriting it from SIB via the iframe :muscle: