Are you encountering a subtle issue with your Divi Gallery on mobile, where the content below it is briefly pushed down when you switch slides for the first time? This "once-you-notice-it-you-can't-unsee-it" bug seems to be caused by a small discrepancy in the way different devices handle CSS display properties during a slide transition.
The core of the problem lies in the temporary switch the gallery module makes to a list-item display property while transitioning between slides before settling on block. While this shift goes mostly unnoticed on desktop browsers, some mobile devices, such as iPhones, render list-item and block differently enough to cause content layout to shift during the gallery slide transition.
Fix Gallery Module Content Shift on Mobiles using Divi Booster
Divi Booster includes the option to fix this issue. You can enable from the Divi Booster settings page at:
Modules > Gallery > Prevent gallery module mobile content layout shift on first slide change
Like so:
Once enabled, the issue should be resolved.
This setting is available in Divi Booster v4.4.9 onwards.
Fix Gallery Module Content Shift on Mobiles using CSS
This issue can also be fixed using CSS. By enforcing the block display property on gallery items during the transition, we can eliminate the content shift and create a seamless experience across all devices.
Here's the CSS snippet that addresses the issue:
.et_pb_gallery .et_pb_gallery_item.et_slide_transition {
display: block !important;
}
By adding this snippet to your child theme's stylesheet or through Divi's Theme Options custom CSS, you'll ensure that during transitions, the slide items maintain a block display. This effectively prevents any jumping or pushing content down as the slide changes.
Make sure to clear any caching on your site and test on various devices to confirm the issue is resolved. This small but effective tweak ensures a smoother and more professional look to your Divi galleries, especially on mobile devices where such nuances can make or break user experience.
hey Dan seems working now! Are you planning to include this in new D.Booster update or shall I manually put in css? Thanks!
Hey Emiliano, that's great to hear – thanks for confirming it! The latest Divi Booster update (v4.4.8) automatically applies this fix when the gallery module image counter feature is enabled, so you won't need to add it manually.
Since the bug happens on all galleries, not just those using the image counter feature, I'm also adding a separate option in the Divi Booster settings to fix the issue on all galleries. I'll update this post when it's available. You won't need this setting for your image counter enabled galleries, but if you use other galleries you may want to enable it to fix the issue on those.