Jump to content

Custom CSS Responsive iframe not working

Recommended Posts

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

 

Schermafbeelding 2022-07-10 om 16.59.18.png

Edited by Groeipiraat
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

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?

Link to comment
  • 8 months later...

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;
}

Screen Shot 2023-03-30 at 12.05.53 PM.png

Screen Shot 2023-03-30 at 12.05.23 PM.png

Screen Shot 2023-03-30 at 12.04.42 PM.png

Link to comment
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;
}

Screen Shot 2023-03-30 at 12.05.53 PM.png

Screen Shot 2023-03-30 at 12.05.23 PM.png

Screen Shot 2023-03-30 at 12.04.42 PM.png

use this

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.