Carousel mobile image size

That is rather small, can you confirm that you have the same problem on a real mobile device?

If so, would you please check the example gallery/carousel at https://jetpack.com/support/carousel/ on that mobile device too and let us know if you see the same problem there? (and, if so, which mobile device did you use?)

Also, please let us know the URL of the site with the problem. If you’d rather not share that publicly, please reach out to us via https://jetpack.com/contact-support/?rel=support

Hi James.

On real mobile (Huawei P8 Lite):
My site portrait:
https://paste.pics/4I44W

My site landscape:
https://paste.pics/4I452

Jetpack example gallery portrait:
https://paste.pics/4I45M

Jetpack example gallery landscape:
https://paste.pics/4I45U

1.) As you can see, although it does look better on mobile, it is still too small (here comes the tricky part) – according to me. I can actually see why: It caters for the partial preview of the next and previous photo in the gallery, and also the buttons/arrows. If only this was not the case where you have only one image in the gallery.

2.) Another argument might be that there is the “view image full size” in the carousel specifically for larger views, but that defies the whole point of having a carousel in the first place.

3.) Aspect ratios: What would make things absolutely fantastic is if at least the media in question would display bigger according to its aspect ratio, but even that doesn’t make a difference (hence me posting portrait as well as landscape to better explain the problem).

4.) ***IMPORTANT***:
Apart from having media queries at each breakpoint for div margins and padding, I have the following css in my customizer specifically for text…

.site-content,
.site-info {
  font-size: calc(12px + (16 - 12) * ((100vw - 360px)/(1600 - 360)));
  line-height: calc(1.2em + (1.75 - 1.2) * ((100vw - 300px)/(1600 - 360)));
}

.site h1{
	font-size: calc(2.5em + (35 - 2.5) * ((100vw - 360px)/(1600 - 360)));
	line-height: calc(0.8em + (20 - 0.8) * ((100vw - 300px)/(1600 - 360)));
}

I found that this interferes directly with the Jetpack Carousel, and causes the majority of the problem.
I removed the code, and things were at least a little better on desktop.

Still, according to my taste, the images can do with much less padding and/or margins when viewed in the Jetpack Carousel. Otherwise I might as well make all images link to their respective http….jpg page. The person browsing can then enjoy full size, but they have to click/tap “back” to go back to the website’s page. But then again: the amount of clicks/taps for the customer remains the same, regardless of which route I take.

The site is in maintenance mode, but let me know if you would like to have look at it anyway, then I’ll inbox you.

Thank you for your time.

Hi there,

Regarding the size of the image displayed in the carousel, that’s dependant on the screen size of the device you use.

I’ll run some tests and see if I can get some CSS code to make the images fill more space when viewed in the carousel.

Thanks Fotis,

I also realize that every carousel/modal/lightbox is forced to use sufficient padding for the close button too.

Thus, this task might give you grey hair ??

Nevertheless, I appreciate the effort.