▼
Streaming live at 10am (PST)

Removing whitespace from an iframe in HTML embed

Design help Custom code
#1

Hi all!

I am trying to incorporate an iframe document with a comparison slider on my website.

I am trying to size it appropriately for desktop and mobile, but at the moment I have a bunch of white space above and below the image that I want to eliminate (I want it the top of the computer to align roughly with the image to its left).

I have tried adding display: block with no use. How would you adjust the code?

Separately, I noticed that there’s a white transparent film over the whole homepage. Can anyone advise how to fix that?

Thank you!

Julia
37%20AM
Screen Shot 2019-04-24 at 11.07.37 AM.jpg1922×1158 183 KB

Here is my site Read-Only: https://preview.webflow.com/preview/julia-purcells-portfolio?utm_source=julia-purcells-portfolio&preview=f8185279240bdf21e8f27aff8c4214ee
(how to share your site Read-Only link)

#2

Please share a published link to your project so that we can view the rendered page in a browser. Thanks.

#3

Separately, I noticed that there’s a white transparent film over the whole homepage. Can anyone advise how to fix that?

Hi Julia,

The body has an opacity setting of 60% causing everything to be faded slightly. Remove the opacity setting.
CloudApp

In the code, you could change the height="300" which seems to look better?

<iframe frameborder="0" 

class="juxtapose" width="1228" height="300" 
    src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=bc4fb530-62c0-11e9-8106-0edaf8f81e27"> <a href="https://webflow.com/design/julia-purcells-portfolio?pageId=5c886bc0a3ccc18941aa61ba">

 </a> </iframe>
#4

Thank you so much @magicmark - the height change worked like a charm. I can’t believe I didn’t try that earlier!

re: the transparency - only issue is that you can’t change the opacity for the body. So it’s stuck on 60% somehow. Does anyone know how to fix that?

1 Like
#5

Glad that worked! :slightly_smiling_face:

For removing the transparency, option or alt click the blue opacity label as in the GIF, or you can right click to remove the style.

You shouldn’t need opacity settings definitively set on items unless you want less than 100% or you use hover transitions.

#6

thank you, that worked great!

#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.