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 4
  • 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

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.