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

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

Add to Design > Custom CSS

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

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 @tuanphan! this 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?

13 hours ago, subtlety said:

thank you so much for @tuanphan! this 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

works perfectly, thank you so much @tuanphan!!!! life saver.