map How to set a different size for a google map on mobile SQSP7.1

Site URL: https://www.stelviopartners.com

I have placed a Google map in a footer with the right size, but in the mobile view the height shrinks so much that the map is useless. So I am searching for a solution to change the height only for mobile. I have implemented this personalized code from Tuan Phan,@tuanphan but unfortunately, it doesn't work:

@media screen and (max-width:640px) {
#yui_3_17_2_1_1622210185104_922 .image-inset {
    padding-bottom: 60% !important;
}
}

I have done quite some research but seems that not many have this same problem.  Any kind of hint would be greatly appreciated.

Cheers,🤩

Cris

Add to Design > Custom CSS > Save & reload the site

/* Mobile-Footer-map block */
@media screen and (max-width:767px) {
footer.sections .map-block>div {
    padding-bottom: 50% !important;
}
}

Thank you very much Tuan: that solved my question!!!

On 5/28/2021 at 8:01 AM, tuanphan said:

Add to Design > Custom CSS > Save & reload the site

/* Mobile-Footer-map block */
@media screen and (max-width:767px) {
footer.sections .map-block>div {
    padding-bottom: 50% !important;
}
}

 

@tuanphan

Can I ask why you use "max-width: 767px"?

I've seen it on many of your codes, and always curious as to the 767 as opposed to the 640.

Thanks!

P.S. This code worked for me, too, in another area than the footer. Just tweaked it a bit!

1 hour ago, Poppyseeds said:

 

@tuanphan

Can I ask why you use "max-width: 767px"?

I've seen it on many of your codes, and always curious as to the 767 as opposed to the 640.

Thanks!

P.S. This code worked for me, too, in another area than the footer. Just tweaked it a bit!

7.1. use max-width:767px for mobile

7.0 is 640px, it may be different, if you change the Breakpoint in Site Styles.

23 hours ago, tuanphan said:

7.1. use max-width:767px for mobile

7.0 is 640px, it may be different, if you change the Breakpoint in Site Styles.

I'll go back and change all my Custom CSS code on this 7.1 site. I'm glad I asked!

Thank you!