Issue with the iFrame and the mobile version

[MaxCure]

I am having an issue with with the mobile/responsive version of my donor form. When the donor comes to the page they can select an option but they can't get to the "make a contribution" button. I can get to the second page by pressing go in my keyboard but then when we get to the second page there is no way to get down through the form. The iframe is cutting off and there is no scroll option.

The code I am adding to my page is:

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe SRC="https://connect.clickandpledge.com/w/Organization/maxcurefoundation/paymentwidget/af7b6f64-2314-40c5-8bb7-ae20544af575" frameborder="0" allowfullscreen></iframe></div>

I tried adding a height to the iframe style but that is not working.

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class="embed-container"><iframe style="height:300px;" SRC="https://connect.clickandpledge.com/w/Organization/maxcurefoundation/paymentwidget/af7b6f64-2314-40c5-8bb7-ae20544af575" frameborder="0" allowfullscreen></iframe></div>

My site is a responsive wordpress theme... I am attaching a screen shot from my iphone. Any suggestions on what to do? A large majority of our donors comes from mobile.

[CnP.Support]

Good day!

This issue was resolved by your developers based on our discussion at the Office Hour. The issue was with the CSS on your site which was hiding the bottom portion of the form due to DIV tag overlay.

Please let us know if we can be of more assistance.