Jetpack Gallery

Sparkling
1

Hi - I’m building a 3 x 3 Tiled Gallery with Thumbnails with Jetpack however the gallery keeps being split over four rows and thus includes blanks in some rows. Jetpack have been unable to fix the problem and recommended that I reach out to Colorlib.

Any guidance on how I could fix this would be most appreciated.

2

Hi @chris001,

I hope you are well today and thank you for your question.

Is it working fine for you using any default WordPress theme like Twenty Fifteen?

Could you please share me the page URL from your site where it is not displaying correctly so that i can troubleshoot it?

Kind Regards,
Movin

3

Hi @Movin,

I’m afraid that our site is not yet live so please find temporary login details below:

Site: www.quipmo.com
UN: Colorlib
PW: NNWsxaNhrITd^!!s!eeKeT

Any help would be most appreciated.

Best,
Chris

4

Thank you for sharing your site details but i didn’t find the gallery on your site so could you please share me the exact page URL from your site where it is not displaying correctly so that i can troubleshoot it?

Also this can be child theme issue on your site so to confirm it just temporary use the Sparkling theme instead of child theme on your site. If everything works fine then it’s your child theme issue so just share me your child theme so that i can troubleshoot it.

5

Hi @Movin,

Sorry about that - the gallery that isn’t working is on our front page - under the Our Community header.

I’m afraid that I’m not quite sure that I follow your question of whether it’s the child or parent theme.

Best,
Chris

6

I visited your site and found it’s working fine as shown in the attached screenshot.

Is it any browser specific issue?

Please advise.

7

Hi @Movin,

We’ve noticed it on both chrome and safari but one thing that I have just noticed is that if I reduce my screen zoom to less than 75% the gallery then displays correctly. The screenshot below shows how it displays at 75% and above.

Best,
Chris

8

You can try resolving this issue by adding the following CSS code in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS


.gallery figure.gallery-item:nth-child(3n+1) {
    clear: both;
}
9

Fantastic @Movin, that looks like it has done the trick. Thanks for all of your help!

10

You are most welcome here :slight_smile: