Google Maps Embed: Overlap Issue

Hi, I have put a google maps embed into my footer, but when I reduce the page size, it overlaps rather than resizes (image attached).

This is the code I am currently using (in custom CSS)

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

What do I need to change to make it right?

https://labellevieibiza.squarespace.com/

Password: lbv2024

3 hours ago, tiffybennett1 said:

I have put a google maps embed into my footer, but when I reduce the page size, it overlaps rather than resizes

Have you tried using a Map Block instead?

Did this help? Please give feedback by clicking an icon below  ⬇️