Support » Plugin: Jetpack by » Responsive rendering on Jetpack Gallery

  • Resolved roseba


    In testing rendering of the site I’m building I noticed odd behavior in the Jetpack Gallery, Carousel view.

    On a large viewport (1200+), the title will display on the left side, while the caption will be in the center right below the image. The title is lower on the page than the caption. I would have been happy to have a different choice about this placement.

    However, when I view this on an iphone4, the title is placed higher on the page. The caption doesn’t display at all because it out of viewport and you can’t scroll down to see the rest.

    In a few other viewports I saw similar behavior where the title and the captions switch relative position on the page.

    When moving the viewport in my browser here –, the placement of both title and caption seems to float without a known relationship to the placement of the photo. Is there something I’m missing here?

    Wouldn’t it make sense to have title and caption stacked and in the center of the page below the image?

    I tested this on Twenty Thirteen to make sure it wasn’t an issue with my theme. The images I serve up are various sizes, some landscape and some portrait.

    As an aside, why would the font-face not cascade and use the same font as the rest of the theme requiring a function to a new stylesheet simply to change it from sans-serif?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Jeremy Herve


    Thanks for the report. We’ve made quite a lot of changes to the Carousel module in the past few days. Would you mind trying to install Jetpack’s development version, and let me know if you still experience these issues?


    I installed the alpha.

    Linked are screencaps from my phone. 329×420 –

    The first photo is of flowers capped in portrait. Notice the title wraps and does not display within the viewport? (You can’t see the caption at all.)

    If you change the orientation of the phone, the photos shrinks leaving a lot of blackspace around it, but the title doesn’t even display.

    Notice in landscape the image shrinks down and places itself in the middle of the screen. It leaves a lot of blackspace around it, but the title doesn’t appear in spite of the image shrinking.

    The third is a portrait with a short title. In this viewport you can just barely see the top of the letters for the caption. You can scroll down and see the full title, the caption and the view full size option, but it only shows on scroll. Shouldn’t it reduce to fit the viewport in this instance?

    As far as the rest of the Jetpack, I’m happy to report any findings that I notice although I’m only using a few components from it.

    Plugin Author Jeremy Herve


    I think these caption issues are related to this bug that was introduced in WordPress 3.7, and will be fixed in 3.7.1.

    Could you try to add the following constant to your site’s wp-config.php file: according to the ticket it should fix the issue until the new version of WordPress is released:

    define('SCRIPT_DEBUG', true);

    Let me know if it helps.

    I cleared all my caches; pages and module caches.

    I’m afraid I see no difference. At 768×1280 it renders OK but all the text ends up out of viewport (below the screen). On 600 and below, the title text wraps like the screenshot. I retested this again using Twenty Thirteen. The results are the same.

    FYI. The development version of Jetpack adds a new menu item in the administrative interface between “Pages” and “Comments” called “Food Menus”. A new content type?

    Plugin Author Jeremy Herve


    WordPress 3.7.1 was released last night and includes fix for the caption issue. Do you still see the bug after updating?

    FYI. The development version of Jetpack adds a new menu item in the administrative interface between “Pages” and “Comments” called “Food Menus”. A new content type?

    Jetpack does indeed include a few Custom Post Types, that only get activated when you use a theme that requires it. But that development version includes a bug, as you realized, and the Custom Post Type is always activated. It will be fixed during our tests.

    I uploaded the new version. A little tricky because my WP install believed it was “already” installed. I had to fix that through FTP.

    Anyway, I unfortunately don’t see any change. The appearance is adequate for desktop but seems to breakdown below 600 or so. I don’t have endless testing tools and the tool I use isn’t an exact replication, but I can confirm that it appears like this in both iPhone4 and the Galaxy S4.

    The screenshot included is an emulation of the Google Nexus Tablet (603×933) which is this viewport and lower it breakdown. So everything below it wraps.

    At desktop if you use MagiCSS live editor as a Chrome plugin, you can see the background using this code:

    .jp-carousel-titleanddesc {
    background-color: pink;}
    /*complely collapses at smaller viewports*/
    .jp-carousel-titleanddesc-title {
    .jp-carousel-titleanddesc p{
    	color: orange;

    I use colors so I can clearly see what I’m working it.

    Then reduce your browser size and watch what happens to the pink background. It collapses to 0px.

    Plugin Author Jeremy Herve


    Could you try to disable the Minify module in your caching plugin, and let me know if it helps?

    If you still experience issues, it might also be worth switching to one of the default themes for a few minutes, to make sure that the problem is not caused by some theme styles bleeding out into the Carousel view.


    It appears to be working, just taking a long time to populate onto difference devices. I have confirmation on a Samsung Galaxy4, Iphone 4 and the Galaxy Note.

    Thank you for your help and your patience!

    I hate to be the barer of bad news or a nudge, but unfortunately this is still buggy.

    These screen shots are using Twenty Thirteen with no modifications at all on the iphone4s. The default theme on one of the most common mobile phones and caching completely deactivated. You don’t get more ubiquitous than that. It’s still buggy. 🙁

    Valentine2 uses title and description.

    Flowers in the field uses title and caption. I scrolled on the page so you can see what is happening.

    I understand how tricky this is to get working.

    Plugin Author Jeremy Herve


    The screenshots do not seem to be available anymore. Could you upload them again, so I can take a look?


    Sorry. I had the retrieve the images from my recycle bin and reupload them.

    Since the update, I still occassionally see the wrapping where the title and description is 75px wide, forcing it to wrap.

    The issue where it is cut off at the bottom of the iphone4 viewport is still evident. I don’t know what happens on the 5 since I don’t own that hardware, and it’s hard to simulate that behavior on an emulator.

    Plugin Author Jeremy Herve


    Thanks! I was able to reproduce the issue on one of my test sites, with only Twenty Thirteen installed.
    We’ll take a look at this and see how we can address the issue. I’ll post again here when I have some news.

    Thanks again for the report!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Responsive rendering on Jetpack Gallery’ is closed to new replies.