Groeipiraat Posted July 10, 2022 Share Posted July 10, 2022 (edited) 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 Edited July 10, 2022 by Groeipiraat Link to comment
tuanphan Posted July 11, 2022 Share Posted July 11, 2022 Add to Design > Custom CSS /* GG Map */ iframe.responsive-iframe[src*="maps"] { width: 100% !important; height: 700px; } 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
Groeipiraat Posted July 12, 2022 Author Share Posted July 12, 2022 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
tuanphan Posted July 13, 2022 Share Posted July 13, 2022 I think that code is enough. You can try. 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
Groeipiraat Posted July 13, 2022 Author Share Posted July 13, 2022 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! 👏 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment