iframe scrollbars

[zaahideen]

i have placed an <b>iframe</b> on my website. for some reason scrollbars are appearing on it, even though i have set the height and width of the iframe to 100%

also i have tried using the “overflow: hidden;” attribute but NO luck

please help…

http://utechproducts.co.uk/

scroll to the footer and <b>Subscribe Now</b> part is the iframe

[Shikkediel]

I’ve been messing with this a lot before as well. Seems the only working approaches are an inline scrolling="no" (although this isn’t really correct) or, as I found is not officially supported but working in all desktop browsers nonetheless, adding a seemless attribute to it.

Edit – cr*p, looks like it was removed from the current spec.

[I.m.learning]

Until my computer is fixed, I am bored as heck.

I copied the OP’s code and pasted on my local environment. I removed the link to their CSS, nothing really changed.

The code looks like Bootstrap. When I used frames I used:

<iframe  class="embed-responsive-item" src=" Your source here"></iframe>

I think the only way to remove the scrolls, without any hacks is to make the frame larger

But I looked at the CSS and is curious about using

div.column...iframe...

When I changed my iframe, I never set a width/height inline; I just set the style in the sheet iteself. Iframe is the same as html, body, p, h1, etc.
My style is

iframe{width:80%!important;height:1000px;}

However, I do use 2 of them and add an id and style them for @media inquiries:

/* when reaching to tablet size, change to:*/
@media screen and (max-width: 990px){
#iframe1{margin-left:-70px!important;width:600px!important;}
#iframe2{margin-left:-30px!important;width:460px!important;}
}

[I.m.learning]

I don’t know why; but this damn thing keeps removing part of my code. I even tried using the lt and gt escapes and it still removes it

div class=”embed-responsive embed-responsive-4by3″

iframe class=”embed-responsive-item” src=”your source here”

[Shikkediel]

I think I found the culprit, disregard my earlier post. Just doing a p {margin: 0} for the page in the iframe should do the trick.

[Author]

Posts