Different settings for mobile and web view

Wishlist Google Maps
1

Im using the google maps embed and on the website view, 500px looks nice, but on mobile view 500px is too large. It’d be nice if there was an option to specify different values for mobile and web views

1 Like
2

Hi @user3785 and welcome to Community :wave:

Thanks a bunch for sharing your feedback with us!

I totally agree that it would be really helpful to add this setting to the configurator! We’ll try to consider this opportunity in our future updates.

As for now, I guess it’s possible to customize the widget using the CSS code. I’ll talk to our devs and get back to you a bit later :slightly_smiling_face:

3

@user3785 Thank you for waiting!

We’ve added this code to the Custom CSS field on the Appearance tab to make your widget smaller on mobile:

@media (max-width: 480px) {
  .global-styles,
  #eapps-google-maps-1.eapps-google-maps {
    height: 400px;
  }
}

Check it out and let me know if you like what you see :slightly_smiling_face:

4

Yes, that works perfectly. Is there any CSS that can be applied to make the pop up box smaller as well in mobile view. I noticed it’s the same size even when it’s a smaller screen. If that can be fixed I think I can make that work and replace it with what I have now and be able to get the paid version.

1 Like
5

Great!

I’ve forwarded your second request to our devs. I’ll keep you in the loop here :slightly_smiling_face:

6

Thank you for waiting!

We’ve added this styles to make the popup smaller on mobile:

@media (max-width: 480px) {
  [role="dialog"] {
    transform: translate3d(-50%,-100%,0) scale(0.8);
    transform-origin: bottom;
  }
}

Please check it and let me know if you like what you see :wink: