Title: Carousel mobile image size
Last modified: January 11, 2019

---

# Carousel mobile image size

 *  Resolved [Richard](https://wordpress.org/support/users/meelperd/)
 * (@meelperd)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/)
 * The Jetpack carousel shrinks images too small on mobile devices to view.
    Is 
   this a bug? If not, is there a way I can override this with css?
 * Screenshot of viewport at 1200px wide:
    [https://paste.pics/4I0JQ](https://paste.pics/4I0JQ)
 * Viewport at 360px wide:
    [https://paste.pics/4I0K8](https://paste.pics/4I0K8)
 * It should at least be nicely visible with little or no margins and padding like
   the original:
    [https://paste.pics/4I0MC](https://paste.pics/4I0MC)

Viewing 4 replies - 1 through 4 (of 4 total)

 *  Plugin Contributor [James Huff](https://wordpress.org/support/users/macmanx/)
 * (@macmanx)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/#post-11080026)
 * 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/](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](https://jetpack.com/contact-support/?rel=support)
 *  Thread Starter [Richard](https://wordpress.org/support/users/meelperd/)
 * (@meelperd)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/#post-11080862)
 * Hi James.
 * On real mobile (Huawei P8 Lite):
    My site portrait: [https://paste.pics/4I44W](https://paste.pics/4I44W)
 * My site landscape:
    [https://paste.pics/4I452](https://paste.pics/4I452)
 * Jetpack example gallery portrait:
    [https://paste.pics/4I45M](https://paste.pics/4I45M)
 * Jetpack example gallery landscape:
    [https://paste.pics/4I45U](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.
 *  Plugin Support [Fotis Stathopoulos](https://wordpress.org/support/users/fstat/)
 * (@fstat)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/#post-11086840)
 * 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.
 *  Thread Starter [Richard](https://wordpress.org/support/users/meelperd/)
 * (@meelperd)
 * [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/#post-11088162)
 * 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.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Carousel mobile image size’ is closed to new replies.

 * ![](https://ps.w.org/jetpack/assets/icon.svg?rev=2819237)
 * [Jetpack - WP Security, Backup, Speed, & Growth](https://wordpress.org/plugins/jetpack/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/jetpack/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/jetpack/)
 * [Active Topics](https://wordpress.org/support/plugin/jetpack/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/jetpack/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/jetpack/reviews/)

## Tags

 * [image size](https://wordpress.org/support/topic-tag/image-size/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)

 * 4 replies
 * 3 participants
 * Last reply from: [Richard](https://wordpress.org/support/users/meelperd/)
 * Last activity: [7 years, 5 months ago](https://wordpress.org/support/topic/carousel-mobile-image-size/#post-11088162)
 * Status: resolved