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! 👏

Hi,

I have a similar issue. Site url: http://daybreakbrokerage.com/mortgage.
My client is a brokerage company and has a third party mortgage calculator widget on a page that isn't responsive on mobile (which the mortgage company says should be and believes Squarespace has some kind of code that is interfering). I've tried adding div tags and custom CSS similar to what was initially tried for the Google Map but it hasn't worked. Should I add something similar to the code you suggested earlier: 

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

On 3/31/2023 at 2:16 AM, Lesh said:

Hi,

I have a similar issue. Site url: http://daybreakbrokerage.com/mortgage.
My client is a brokerage company and has a third party mortgage calculator widget on a page that isn't responsive on mobile (which the mortgage company says should be and believes Squarespace has some kind of code that is interfering). I've tried adding div tags and custom CSS similar to what was initially tried for the Google Map but it hasn't worked. Should I add something similar to the code you suggested earlier: 

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

use this

@media screen and (max-width: 767px) {
    iframe#DaybreakId {
        width:100% !important;
        min-width: 350px !important;
        height: 1600px !important
    }
}