Need help with embed code

  • Having trouble trying to get some code to work. I am trying to embed content from a web page that would allow me to have the content appear within full width of my website. However, embed appears small when using 100% for height and width, but when I added 750 px for the height the embed is appearing behind the footer of my website and behind other elements of my site.

    Is there better coding I should use instead of this that will allow the content to appear full width?

    <iframe frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"
src="https://latinoelectionpolls.com/app/ld/latinovote/"></iframe>
    <iframe frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:750px;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="750px" width="100%"
src="https://latinoelectionpolls.com/app/ld/latinovote/"></iframe>

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Please note that mine solution is not good as I’m using :has() selector which does not have full browser support at current stage. https://caniuse.com/css-has

    But in case there is no better solutions (meaning after other developers take a closer look at this) and given that you’re able to add custom CSS, there is the solution I come up with.

    If this is the style you’re looking for, then you can add following CSS to your site. https://imgpanda.com/upload/ib/c7FTEQUze7

    /* Make the container that has iframe full width. */
.container:has(iframe) {
    max-width: 100%;
    padding-inline: 0;
}

/* Cancel the top margin on this row that has iframe inside of it. */
.container > .row:has(iframe) {
    margin-top: 0;
}
    Moderator bcworkz

    (@bcworkz)

    Since you can apparently alter the page’s HTML, instead of :has(), you can add a unique class or ID to the iframe’s container and style accordingly. The problem is you only achieve in making the container full width, the iframe’s internal content remain’s as-is because its width is arbitrarily limited to 940px by the source site’s CSS. It’s not possible to alter the styling of iframe content from outside. About all you could do is scale up your container so everything within is bigger overall. But doing so affects the page layout and causes the page to overflow its viewport. These flaws can be corrected with other CSS.

    This is not really a very good solution. I would consider sizing the container to work with the iframe’s content and appropriately adjust the overall page layout. For example, a narrower iframe container might leave room on the right for the learn more graphics to stack vertically as a kind of sidebar. On narrower screens they can move back down to where they are now.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Need help with embed code’ is closed to new replies.