subtlety Posted January 24, 2022 Share Posted January 24, 2022 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 Link to comment
tuanphan Posted January 25, 2022 Share Posted January 25, 2022 Add to Design > Custom CSS /* Mobile map */ @media screen and (max-width:767px) { iframe[src*="clean.bigbelly.com/dsny"] { width: 100% !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
subtlety Posted January 25, 2022 Author Share Posted January 25, 2022 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? Link to comment
tuanphan Posted January 26, 2022 Share Posted January 26, 2022 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 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
subtlety Posted January 29, 2022 Author Share Posted January 29, 2022 works perfectly, thank you so much @tuanphan!!!! life saver. 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