Envira Images small on mobile

[mcphoto]

Hey guys - this page:

http://tomhoitsma.com/abstracts/

Envira looks fine on the desktop - full size images are 570px high, which keeps the columns even in the thumbnail view and the size is fine in the lightbox.

On mobile, the lightbox images are like postage stamps. I’ve tried enabling and disabling “Create Mobile Gallery Images”, but lightbox sizes remain small. I’ve tried “mobile dimensions” up to 1200x1200px; played with the “image size” controls in the lightbox panel; turned off nav arrows and reduced the border size in CSS. The lightbox images are still very small on mobile. Any ideas?

[lely]

Hi There,

This is what I am seeing on mobile which is fine:

Can you clarify how you want it? Note that it will adjust automatically based on height and width proportion.

[mcphoto]

Client would like it to fill much more of the screen; seems like a lot of unused real estate, and you can’t zoom on the images like most phone photos. We’re not using navigation arrows or thumbnails, so there’s a lot of unused space.

[friech]

Hi There,

Please take a look on the Envira Gallery Lightbox options, see the image size option and Keep Aspect Ratio you can upload a much larger image than what you have now so they show up larger on the lightbox, but this is a trade-off because larger images are slow to load. These are the only options that Envira Gallery lightbox provide, other than this will require a custom development.

Thanks,

[mcphoto]

I uploaded a test image, last image in that gallery - all images are 570px tall, this one is 800. It renders larger on desktop, but the same small size on mobile as all the other images - so image size on mobile is limited in some way - isn’t there a CSS fix that could alter whatever that max size is? The image size seems to have no bearing on the way they’re rendered on mobile.

[rad]

Hi there,

It appears different on my end, and it’s centered. Perhaps it depends on the device where it’s viewed. Would you mind providing a full screenshot of what they are getting? Please note that it only responds to device width, hence, a landscape image would always appear smaller on mobile with portrait view.

Thanks!

[mcphoto]

Here’s a screen shot, looks the same to me as the screen shots you posted. This is iPhone SE, current iOS. Portrait, not landscape. I added the green box to show as an example of a preferable size, it’s not using much of the screen. Doesn’t matter what size image I upload, it’s always this small on mobile; Seems like the size could be almost doubled and still work well.

[nabeel]

Hi again,

Can you please try adding the following CSS code in the Theme Options > CSS:

.envirabox-wrap.envirabox-mobile.envirabox-type-image {
    width: 92% !important;
    left: 4% !important;
}
.envirabox-wrap.envirabox-mobile.envirabox-type-image .envirabox-outer {
    width: 100% !important;
    height: auto !important;
}

Let us know how this goes!

[mcphoto]

YES!!! That looks like the answer - it seems obvious envira’s mobile rendering is more of a set size, that looks good!

[christian]

You’re welcome.