Help with embed being too large on mobile

Hi,

I tried looking for a solution elsewhere but couldn't find one that worked for me.

I have these amazing maps embedded on my new/work in progress website, however on mobile they run over the edge of the window. If there a way to force these embeds into the screen on mobile?

I've attached a mobile and desktop screenshot below for comparison.

Thanks in advance :)

Can you share link to page where you embed this? We can check easier

My apologies, can't believe I forgot such an important part of my post 😅

Right here: https://www.spacefromspace.com/

Thanks again!

Add to Design > Custom CSS

/* Map on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1679354939610_11121 div {
    width: 100% !important;
}
}

Thank you so much for your help!

Is there a way to apply this to all pages?

I have one of those embeds for each one of the projects in my galleries: 
https://www.spacefromspace.com/gallery2023
https://www.spacefromspace.com/gallery2022
https://www.spacefromspace.com/gallery2021

My apologies for such a late reply!

I appreciate all of your help, that has fixed my issue.

Thank you!

Hello, I'm having a very similar problem at tomfryercounselling.com,

I have a really nice Google Maps embedded on my website, and it looks lovely on the Desktop, but on the Mobile view it stretches too far to the right, which messes up the whole page.

I've tried inserting the above code in Design > Custom CSS but it hasn't seemed to work.

On 4/5/2024 at 11:23 PM, Tom_Fryer_Counselling said:

Hello, I'm having a very similar problem at tomfryercounselling.com,

I have a really nice Google Maps embedded on my website, and it looks lovely on the Desktop, but on the Mobile view it stretches too far to the right, which messes up the whole page.

I've tried inserting the above code in Design > Custom CSS but it hasn't seemed to work.

You can use this code to Website > Website Tools > Custom CSS

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