Hi All -
So for my homepage i have a full-bleed gallery slideshow that cycles through some of my images. The issue is that on mobile, the images don't present as well as they are landscape images and I want to try to display a different set of images for mobile in portrait orientation.
What I've tried to do is have 6 portrait images at the beginning of my slideshow and specifying their visibility to be hidden on desktop, but visible in mobile using the index in which they are listed in the parent element (:nthchild(x+6)).
From what I've gathered on page inspection, it appears that whenever the slideshow cycles the next image, the figure for that next image is pushed to the bottom of the following parent element that contains all of the figures:
<div class="gallery-fullscreen-slideshow-list" style="height: 286px;">
and the figure element updates visibility from hidden to visible, so due to this nth-child selector does not work as the active image is always the last child in the parent element.
Does anyone have a solution for this?