How can I make a Google Maps HTML script more responsive for mobile?

Technical Q&A
1

Hello! I’m in need of help with making this google maps html script more responsive. For Desktop, I like how it appears with padding-bottom (aspect ratio) at 40%. However, for Mobile I would like to change it to 75% without affecting Desktop. And if its possible to implement some sort of sliding scale going up to 75% as the screen size gets smaller that would be amazing. I am only familiar with how to add a media query with CSS. Thanks in advance!

.google-maps { position: relative; padding-bottom: 40%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
2

First Answer

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

Hi Life_Wellness we can use some code for display only mobile screen it’s a @media only screen and (max-width: 768px) you can learn more at the link i left

https://stackoverflow.com/questions/48358208/how-to-show-text-only-on-mobile-with-css

And your code can be changed to

@media only screen and (max-width: 768px){ .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } } .google-maps { position: relative; padding-bottom: 40%; // This is the aspect ratio height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

I hope my above information can help you, if you have any questions or problems, please leave them in the comment section below to help me.

Best regards,

Richard | PageFly

3

Hey thanks for the response! But this message that shows up when I try to use that script.

Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter.