Jump to content

CLOSED // Adding iframe -> navbar, footbar and everything after iframe disappears

Recommended Posts

Posted (edited)

Can be closed // Found the typo.

 

Hi Community,

I added an iframe to one of my pages (https://www.elisabethdeim.com/infografik-illustration-die-welt-der-insekten) to embed an interactive infographic I made in Adobe Animate.

I use an Embed Block to do this.

After embedding the iframe, the navbar, footer and everything after the iframe disappears (many images of the project are placed after the iframe).

If I check the code in Chromes Development Tools I come above this (see attached image). The iframe breaks the code, but I have no idea why.

The page I load into the iframe: https://www.elisabethdeim.com/interaktive-infografik-die-welt-der-insekten

(it uses a header code injection - issue occurs still when I delete this code)

<style>
    .Header, .Footer, .Mobile-bar, .sqs-cookie-banner-v2 .sqs-cookie-banner-v2-cta-container, .sqs-cookie-banner-v2.DARK{
 display:none !important;
}
  
  .Main-content {
    padding:0;
  }

The code I use in the embed-block:

<div class="iframe-container">
<iframe class="responsive-iframe" scrolling="no" frameBorder="0"  src="https://www.elisabethdeim.com/interaktive-infografik-die-welt-der-insekten">
<iframe>
</div>

And the code I inject to the header for this page:

<style>
  .iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 335%; 
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
    
  </style>

 

Does anybody see why adding the iframe destroys the code of the page? 

Screenshot 2024-06-13 174222.png

Edited by elisabethdeim
  • elisabethdeim changed the title to CLOSED // Adding iframe -> navbar, footbar and everything after iframe disappears

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.