lewispickthall Posted December 15, 2021 Share Posted December 15, 2021 (edited) Site URL: https://cylinder-triceratops-8fh3.squarespace.com/ Hello! I have embedded a Google Maps 'My Map' onto one of my blog pages, on the embed code I have stated for it to be a specific size, mainly to make it bigger and fill up the page, which the default code didnt quite do. However when I view the page in the mobile view, the embedded map is still the same size that I made it in desktop mode, is there a piece of embed code that can be used to make the map size down for mobile purposes. In addition I believe that the map is aligned to the left hand side, is there a tweak to the code or some additional code that can allow me to align to the centre? The first screenshot is the map as it is current in desktop mode, the second is it in mobile mode, where I am having the main issues and the third image is a screenshot of the embed code that was used to get what I have currently Edited December 15, 2021 by lewispickthall Images and text were in confusing order Link to comment
tuanphan Posted December 17, 2021 Share Posted December 17, 2021 Hi. Your site is private. Can you setup password & share url again? We can check easier lewispickthall 1 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
lewispickthall Posted January 13, 2022 Author Share Posted January 13, 2022 Hello taunphan sorry about the delay, the issue is still here! The site is now live so you should be able to see the issue Link to comment
tuanphan Posted January 15, 2022 Share Posted January 15, 2022 On 1/14/2022 at 3:37 AM, lewispickthall said: Hello taunphan sorry about the delay, the issue is still here! The site is now live so you should be able to see the issue Where is map? I don't see it on homepage 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
lewispickthall Posted January 16, 2022 Author Share Posted January 16, 2022 Its on the About Me page @tuanphan Link to comment
tuanphan Posted January 17, 2022 Share Posted January 17, 2022 12 hours ago, lewispickthall said: Its on the About Me page @tuanphan Add to Design > Custom CSS /* Mobile About Me Resize map */ @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1639578210758_4592 iframe { width: 100% !important; height: 500px; } } 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
lewispickthall Posted January 17, 2022 Author Share Posted January 17, 2022 @tuanphan thats worked! thank you very much! I am wanting to feature these embedded maps on future posts, do you have a 'one code fits all' that can be used for all future posts by any chance? Thanks again Link to comment
tuanphan Posted January 19, 2022 Share Posted January 19, 2022 On 1/18/2022 at 3:42 AM, lewispickthall said: @tuanphan thats worked! thank you very much! I am wanting to feature these embedded maps on future posts, do you have a 'one code fits all' that can be used for all future posts by any chance? Thanks again Try this new code /* Mobile Resize map */ @media screen and (max-width:767px) { iframe[src*="google.com/maps"] { width: 100% !important; height: 500px; } } 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
freshlypressed Posted June 2, 2023 Share Posted June 2, 2023 Hey @tuanphan I'm having a similar issue. I embedded my map, but I want to remove the grey header and make the map full width, can you help me? This is my site: https://pentagon-tambourine-8346.squarespace.com/ (under compost processing) PW: Catapult2023 thawk 1 Link to comment
tuanphan Posted June 3, 2023 Share Posted June 3, 2023 On 6/3/2023 at 3:23 AM, freshlypressed said: Hey @tuanphan I'm having a similar issue. I embedded my map, but I want to remove the grey header and make the map full width, can you help me? This is my site: https://pentagon-tambourine-8346.squarespace.com/ (under compost processing) PW: Catapult2023 Which page? I don't see it on home 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
freshlypressed Posted June 5, 2023 Share Posted June 5, 2023 @tuanphan is under the organics processing page Link to comment
tuanphan Posted June 8, 2023 Share Posted June 8, 2023 On 6/3/2023 at 3:23 AM, freshlypressed said: Hey @tuanphan I'm having a similar issue. I embedded my map, but I want to remove the grey header and make the map full width, can you help me? This is my site: https://pentagon-tambourine-8346.squarespace.com/ (under compost processing) PW: Catapult2023 https://pentagon-tambourine-8346.squarespace.com/compost-processing Can you check it again? 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
thawk Posted June 15, 2023 Share Posted June 15, 2023 On 6/2/2023 at 4:23 PM, freshlypressed said: Hey @tuanphan I'm having a similar issue. I embedded my map, but I want to remove the grey header and make the map full width, can you help me? This is my site: https://pentagon-tambourine-8346.squarespace.com/ (under compost processing) PW: Catapult2023 @freshlypressed did you figure out how to remove grey header from your map? dealing with similar issues and. would love to know! thanks in advance Link to comment
tuanphan Posted June 20, 2023 Share Posted June 20, 2023 On 6/15/2023 at 9:57 PM, thawk said: @freshlypressed did you figure out how to remove grey header from your map? dealing with similar issues and. would love to know! thanks in advance If you share link to page where you have problem, we can give code to remove this gray 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
thawk Posted June 22, 2023 Share Posted June 22, 2023 thanks for any help, here's the link: https://www.sankharapm.com/contact Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 16 hours ago, thawk said: thanks for any help, here's the link: https://www.sankharapm.com/contact Add to Design > custom CSS div#block-yui_3_17_2_1_1686779440390_6068>div { overflow: hidden; } div#block-yui_3_17_2_1_1686779440390_6068 iframe { margin-top: -70px; } 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
thawk Posted June 23, 2023 Share Posted June 23, 2023 many thanks, that looks so much better! greatly appreciated Link to comment
mhb Posted August 27, 2023 Share Posted August 27, 2023 Hi @tuanphan I'm having a similar issue and would like to make my embedded map wider and remove the grey header. I tried entering the codes above in the custom CSS section but doesn't seem to work. could you please help me with that? This is the page: https://www.somewherespecial.co/bali Link to comment
tuanphan Posted August 29, 2023 Share Posted August 29, 2023 On 8/27/2023 at 10:25 AM, mhb said: Hi @tuanphan I'm having a similar issue and would like to make my embedded map wider and remove the grey header. I tried entering the codes above in the custom CSS section but doesn't seem to work. could you please help me with that? This is the page: https://www.somewherespecial.co/bali Add this to Website > Website Tools > Custom CSS /* GG Maps */ iframe[src*="google.com/maps"] { width: 100% !important; position: relative; top: -60px; } div#block-yui_3_17_2_1_1692983902405_2513>div { overflow: hidden; } 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
jimedcrew Posted December 6, 2023 Share Posted December 6, 2023 I'm having this same basic issue. Created a custom Google Map, put in embed code and it's still adjusting on mobile. Here's my site: https://cuboid-reindeer-pwkr.squarespace.com/ Any help anyone can offer would be mighty appreciated! Tim Link to comment
tuanphan Posted December 7, 2023 Share Posted December 7, 2023 22 hours ago, jimedcrew said: I'm having this same basic issue. Created a custom Google Map, put in embed code and it's still adjusting on mobile. Here's my site: https://cuboid-reindeer-pwkr.squarespace.com/ Any help anyone can offer would be mighty appreciated! Tim Where is map? 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
jimedcrew Posted December 7, 2023 Share Posted December 7, 2023 3 hours ago, tuanphan said: Where is map? It's on the Explore Bluffton page. Link to comment
tuanphan Posted December 9, 2023 Share Posted December 9, 2023 Use CSS code @media screen and (max-width: 767px) { iframe[src*="google.com/maps"] { 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
LRautenbach Posted January 25 Share Posted January 25 @tuanphan Hi, I've seen your codes and was wondering if you'd be able to help me out. I've posted my problem with details below. Would you be able to help? Also side note, when you say "add to Design > Custom CSS", where do I find this? I can find the custom CSS under website tools, but I don't have a design option for the embeded map or the overall website...unless I'm looking at the wrong place? Thanks (in advance) so much! Link to comment
tuanphan Posted January 28 Share Posted January 28 On 1/25/2024 at 9:55 PM, LRautenbach said: @tuanphan Hi, I've seen your codes and was wondering if you'd be able to help me out. I've posted my problem with details below. Would you be able to help? Also side note, when you say "add to Design > Custom CSS", where do I find this? I can find the custom CSS under website tools, but I don't have a design option for the embeded map or the overall website...unless I'm looking at the wrong place? Thanks (in advance) so much! SS changed position of menu, you can find it at Website > Website Tools (under Not Linked) > Custom CSS 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment