Responsive rendering on Jetpack Gallery

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?

Thanks!

I installed the alpha.

Linked are screencaps from my phone. 329×420 – https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf

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.

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?

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.
https://dl.dropboxusercontent.com/u/14962511/carousel-wrap.jpg

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 {
background-color:yellow;}

.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.

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.

Thanks!

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.
https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf#lh:null-valentine2.jpg

Flowers in the field uses title and caption. I scrolled on the page so you can see what is happening.
https://www.dropbox.com/sh/4bmvagmb3d0f4rt/J7H1iS31Cf#lh:null-flowers-field.jpg

I understand how tricky this is to get working.

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

Thanks!

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

https://dl.dropboxusercontent.com/u/14962511/flowers-field.jpg
https://dl.dropboxusercontent.com/u/14962511/carousel-wrap.jpg
https://dl.dropboxusercontent.com/u/14962511/valentine2.jpg

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.

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!