Making Embedded Iframe scrollable

I have an embedded Iframe into website page. I would like to add custom CSS to make the Iframe scrollable.

I have tried to add the following code with no luck :

@media only screen and (max-width:640px) {
.qgiv-embed-container iframe {
    height: 1200px !important;
      overflow-y:scroll !important;
    overflow-x:hidden;
  scrolling:yes;
        }
    }
}

My "scrolling:yes" line does not seem to work at all. I also tried to set overflow-x and overflow-y however when I inspect the page the overflow always just says hidden for both.

Any Ideas?

2 hours ago, willzj said:

I have an embedded Iframe into website page. I would like to add custom CSS to make the Iframe scrollable.

I have tried to add the following code with no luck :

@media only screen and (max-width:640px) {
.qgiv-embed-container iframe {
    height: 1200px !important;
      overflow-y:scroll !important;
    overflow-x:hidden;
  scrolling:yes;
        }
    }
}

 

My "scrolling:yes" line does not seem to work at all. I also tried to set overflow-x and overflow-y however when I inspect the page the overflow always just says hidden for both.

Any Ideas?

Can you share your website URL?

6 hours ago, Web_Solutions said:

Can you share your website URL?

Yes @Web_Solutions the website is https://www.dscpugetsound.org/make-a-donation

1 minute ago, willzj said:

Yes @Web_Solutions the website is https://www.dscpugetsound.org/make-a-donation

Can you send me a screenshot where did you add the iframe ?

Just now, Web_Solutions said:

Can you send me a screenshot where did you add the iframe ?

The Iframe is the Choose Your Gift pane on the right side. Well it is a qgiv embedding which contains an Iframe inside. Previously I was having an issue where the frame kept getting cut off despite the height I set. I just manually added the !important override which seems to be forcing the 1200px height but in case screens are very large I also would like to add vertical scrolling which is what I am wondering about how to properly add this code.

50 minutes ago, willzj said:

The Iframe is the Choose Your Gift pane on the right side. Well it is a qgiv embedding which contains an Iframe inside. Previously I was having an issue where the frame kept getting cut off despite the height I set. I just manually added the !important override which seems to be forcing the 1200px height but in case screens are very large I also would like to add vertical scrolling which is what I am wondering about how to properly add this code.

Here is the code. Replace the iframe code with this.

<iframe id="qgiv-embed-61686" class="qgiv-embed-form qgiv-embed" frameborder="0" allowtransparency="true" style="display: block; float: none; width: 100%; border: 0px; height: 600px;" data-embed-position="580.828125" allow="payment" scrolling="yes" src="https://secure.qgiv.com/for/dowsyncom/embed/61686/"></iframe>

2 hours ago, willzj said:

To clarify I would place this as the embed code block on the page? Or would I add this to the custom CSS section? @Web_Solutions

On code block. Not on Custom CSS section