Embeded Widget extending over content on mobile

So I have a DonorBox donation widget in a code block pulling from a database on https://www.fortheloveofalex.org/pets-in-need/buttercup. The problem is on the mobile view it lays over the content in the following div tag. Does anyone know how to fix this?


Here is my site Read-Only: LINK

Hello.
I think the widget has an absolute setting? So Webflow doesn’t see the content. Maybe you could give the div below a margin-top for the mobile setting?
This will push it down and there is no overlap anymore.

Hey @HGWeb thanks so much.

This is the code:

<script src="https://donorbox.org/widget.js" paypalExpress="true"></script><iframe allowpaymentrequest="" frameborder="0" height="900px" name="donorbox" scrolling="no" seamless="seamless" src="https://donorbox.org/embed/buttercup-the-dog-314730985-2021-02-25" style="max-width: 500px; min-width: 250px; max-height:none!important" width="100%"></iframe>

Were you meaning that I should add top margin to the next section div? It didn’t seem to provide the fix I am looking for.

@PixelGeek @HGWeb I have the code placed in a text box in the CMS Collection database and then bring it in via the page through a code box.

It seems to not know what the height should be on mobile so it just overlays on the next section of content. You can see it here on your device if you want to pull it up: https://www.fortheloveofalex.org/pets-in-need/buttercup

I made a screenshot on my iPhone. It looks solved?

@HGWeb that is interesting that you see it that way. I can’t get it to look like what you see at all. I still have it overlapping on my end.

@HGWeb I got it fixed. Seems like I had a height on the mobile breakpoint that I was overlooking.

Great, problem solved :+1:

1 Like