1. Home
  2. Knowledge Base
  3. Customization
  4. Adjusting the height of the location image

Adjusting the height of the location image

Maybe your users like to upload images in portrait mode. On small screens like on a Mobile this could result into unwanted style issues, as the image inside a location bubble need too much space.

To prevent this you could use the following CSS code to set a fixed image dimension (e.g. 4:3) and crop or scale the image inside:

CSS
@media (max-width: 768px) {
  .open-user-map .box-wrap .map-wrap .leaflet-map .leaflet-popup-content-wrapper .leaflet-popup-content .oum_location_image img {
    aspect-ratio: 4/3;
    object-fit: contain;
    object-position: top center;
    background-color: #eee;
  }
}

You could play around with the aspect-ratio or try object-fit: cover to crop the image.

With a future update we are planning to provide a new UX for the mobile view, so this may be just a temporary quick solution in the meantime.

Was this article helpful?

Related Articles

Need Support?

Can't find the answer you're looking for?
Contact Support

EN