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
Lesh Posted March 30 Share Posted March 30 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; } Link to comment
tuanphan Posted April 4 Share Posted April 4 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 } } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment