Jump to content

Making Embedded Iframe scrollable

Go to solution Solved by willzj,

Recommended Posts

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?

Link to comment
  • Replies 7
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
1 minute ago, willzj said:

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

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
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.

Link to comment
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>

 

Edited by Web_Solutions

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
1 hour ago, Web_Solutions said:

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>

 

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

Link to comment
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 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.