Custom CSS Responsive iframe not working

Site URL: https://finch-stingray-xe7m.squarespace.com/werkgebied

My page can be viewed using this password: clogs

Hi, 

I am trying to show a Google MyMaps iframe to load in responsive view. It should be at 100% width on both desktop and mobile view, but it is failing to do so.

The code I injected is from this tutorial: https://www.w3schools.com/howto/howto_css_responsive_iframes.asp

This is the code I used in the code-block:

<div class="container">
  <iframe class="responsive-iframe" src="https://www.google.com/maps/d/embed?mid=1z5TX60I4DPiRlBfMpn16J2iNhscPWlI&ehbc=2E312F"></iframe>
</div>

And this in the Custom CSS:

/* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

/* Then style the iframe to fit in the container div with full height and width */
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

I am no coder myself, so I followed the tutorial, but perhaps I need to set the CSS classes different for SQSP. never understand how this works for SQSP.

Hopefully there is a CSS guru who know what I need to do to make it work. 😏

Thanks in advance! 🙏

Cheers,
Steven

Add to Design > Custom CSS

/* GG Map */
iframe.responsive-iframe[src*="maps"] {
    width: 100% !important;
    height: 700px;
}

On 7/11/2022 at 7:40 AM, tuanphan said:

Add to Design > Custom CSS

/* GG Map */
iframe.responsive-iframe[src*="maps"] {
    width: 100% !important;
    height: 700px;
}

 

This works! Amazing, thank you for this! 🙌

Is this all I need, or do I still need the code I posted here?

I think that code is enough. You can try.

4 minutes ago, tuanphan said:

I think that code is enough. You can try.

It is indeed enough. Again, thanks a lot for the help! Very much appreciated! 👏