Hide map on mobile devices

[tacoshin]

Hello,

Thanks for the great plug-in. Since the map height is not possible to define in %… is it possible to hide the map on viewing the page on mobile?

When I see the webpage on mobile, because of map height (700px) it fits all the display from top to bottom: http://www.thethinline.eu/

Thanks!

[Perry]

Hi Tacoshin,

You can achieve that with some custom CSS. The following code will hide the map on screens smaller than 700px

@media screen and (max-height: 700px)
{
#wpgmza_map
{
display: none !important;
}
}

However, I recommend that you use something like this, which will keep the map visible at 70vh (70% of of the devices viewport height)

@media screen and (max-height: 700px)
{
#wpgmza_map
{
height: 70vh !important;
}
}

That will make your map responsive on screens smaller than 700px

Does that help?

Thank you
– Perry (WP Google Maps – Support)

[tacoshin]

Hey Perry,

Worked perfect.

Thanks.
Miguel

[Perry]

Hi Miguel,

Thanks for letting me know!

If you could take half a minute to leave us a quick review at https://wordpress.org/support/plugin/wp-google-maps/reviews/ I would hugely appreciate it, the reviews are our bread and butter

If there’s anything else I can help you with please feel free to get in touch

Thank you
– Perry (WP Google Maps – Support)

[Author]

Posts