Jump to content

Google Maps Embedded iFrame - Looks Good on Desktop, Won't Resize on Mobile

Recommended Posts

Site URL: https://www.smartcompost.nyc/

Hello!

I'm using a custom Google Map on my website via the embed data block (iframe). It's sized appropriately for desktop, but when viewed on Mobile, the map extends far beyond the rest of the website, forcing users to pinch and zoom out (per screenshots below).

I'm decidedly a novice coder, but is there a simple function I'm missing to have this resized for mobile responsively? I've tried using a script tag outside of the iframe to resize it with no success. Any help would be greatly appreciated, and thanks in advance!

xx

IMG_9719.PNG

IMG_9718.PNG

Link to comment
12 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile map */
@media screen and (max-width:767px) {
iframe[src*="clean.bigbelly.com/dsny"] {
    width: 100% !important;
}
}

 

thank you so much for @tuanphanthis works swimmingly on mobile.

however, it then makes the map extremely small on desktop (currently viewed in chrome). is there an additional condition I can include to have both use cases play nicely together?

Link to comment
13 hours ago, subtlety said:

thank you so much for @tuanphanthis works swimmingly on mobile.

however, it then makes the map extremely small on desktop (currently viewed in chrome). is there an additional condition I can include to have both use cases play nicely together?

The code runs on mobile only, it doesn't affect desktop. Before add the code, don't remove any code in your current code

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 years later...
On 2/15/2024 at 10:21 PM, DigitalPharmacist said:

I am having the same problem but the given code doesn´t work. Do you know why @tuanphan? 

https://www.paroalhonapteekki.fi/etusivu

Use this code

/* Mobile map */
@media screen and (max-width:767px) {
iframe[src*="google"] {
    width: 100% !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.