iFrame code breaks website?

For some reason when embedding some iFrame code with set width and height properties, it completely breaks the site.

Broken Site here: https://connect-car-financing.webflow.io/broken
Working Site here: https://connect-car-financing.webflow.io/

The code I am looking to embed is below:

<iframe width="100%" height="400" src="https://carnationuk.com/carslider/connect/desktop/index.php" frameborder="0" >

<iframe width="340" height="350" src="https://carnationuk.com/carslider/connect/mobile/index.php" frameborder="0" >

The site read-only link: https://preview.webflow.com/preview/connect-car-financing?utm_medium=preview_link&utm_source=designer&utm_content=connect-car-financing&preview=71b449ad41f6e74f86708accd1b49482&pageId=5e1bb02369345966b1b19eff&mode=preview


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

Why don’t you set the sizie in four Webflow object?
Your div with your size
HTML with iframe

If I remove the width and height from the iframe I get this. @JanneWassberg

It also still completely breaks the website.

Any other ideas as to why this might be happening?

Is the size of the div set to auto

@JanneWassberg There are no div’s being used in this. Only Sections, Containers & HTML Embeds.

Please take a look at the read only link, perhaps you can find something I cant?

https://preview.webflow.com/preview/connect-car-financing?utm_medium=preview_link&utm_source=designer&utm_content=connect-car-financing&preview=71b449ad41f6e74f86708accd1b49482&pageId=5e1bb02369345966b1b19eff&mode=preview

ok. give me 5 min to look at it

@Sneaky_Coyote ok tell me what is getting broken.

I have no problem running your iframe with your sizes. But after taking a quick look you have very strange sizing in your project. I don’t know the reason of that but some things are hidden. and other objects have a size of 200%

Kind of confused

If you run your site on a small screen you will se your sizing problem try an iPad in landscape

EDIT
I can se you are using columns, i suggest you use flexbox

@JanneWassberg I’m sorry but it’s a bit hard to understand you. I do have solid reasoning for setting the width of certain images to 200%, it’s a stylistic choice.

What exactly do you mean by “you will see your sizing problem on iPad screens”, to me, the site looks great and responds to all devices just fine.

Take a look at the site preview here: https://connect-car-financing.webflow.io/broken You will notice it is broken.

But when you preview the site in the webflow editor, it doesn’t show anything being broken.

Very odd, any ideas?

When you say broken. what is broken? No left columns showing on start page??

@JanneWassberg That’s correct, the main text/left column doesn’t display and you can’t scroll past the iframe.

PS You really ned to test the site on a small screen. it moves to the right because of your sizing.
It happends on full screen to scroll bar at the bottom

Ok now i know what you are saying, will take a new look

@Sneaky_Coyote did some quick testing on one of my lab sites… The PHP you are calling in the iframe is breaking webflow.

Can’t tell you why is a lot of code to read. Im an OOP programmer not a JS programmer.

Where can i read about the PHP you are using

I took a peek and can’t say for sure what’s causing the issue, although I’m curious as to why you’re using the iFrame for the slider? Assuming it’s not being fed information, that slider can be made completely within Webflow. If it is, you may have luck using Zapier with a CMS collection item - there are more than likely a handful of relevant forum posts around dynamic sliders.

Good luck and keep us updated on what you figure out. Also (even though you probably already know) you’ll want to address that overflowing image in the hero section as it’s breaking the website a bit.

@JanneWassberg Thanks for your help! I’ll talk to my client who provided the code and see if we can get a look at the PHP.

As for the image on the header, it is meant to overflow outside of the boundaries, just a stylistic choice. Would you recommend configuring this in a more “proper” way? I’m all ears!

@mikeyevin Using the iframe as its simply what the client requested, I told the client it would be better if I built it in webflow but haven’t heard back.

I’m aware that the data could be fed dynamically via integrations and Webflow’s CMS, but there is no room in the clients budget for that.

Thanks a lot guys! I’ll talk to my client about the code and get back to you two.

Try This it works for me HTML5

<iframe width="100%" height="400" src="https://carnationuk.com/carslider/connect/desktop/index.php" sandbox="allow-scripts"></iframe>

@JanneWassberg Unfortunately on Chrome (latest version) it still isn’t working for me… Thanks for the attempt though!

@Sneaky_Coyote Works on Edge, Firefox and crome with my test site
Works in my iPad Safari and Crome

My test site https://adb-webflow.webflow.io/

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.