Float Stack with "Slider" as Floated Content--issues displaying on mobile devices

Foundry
1

Folks,

First off (and yes, I realize that I always say this at the start of the few posts I make…but it’s because I really mean it!), THANKS, Adam, for continuing to create great stuff in Foundry. I purchase new Foundry-related stuff (Carpenter templates/layouts, for example) without hesitation, as everything you have created has been of such great help/value!

Here’s the issue I’m dealing with: I use the “Float” stack quite a bit, with still images as well as rotating images as the “floated content,” but seem to have come across a use case in which it acts strangely.

Close to the bottom of this page (in the staging area for a website I maintain), in the “Special Programs” block, there is an accordion with a single entry—“Fall 2020 Teacher Development Series.” Click on that entry to see the some content on which I’ve used the Float stack, with an image Slider (the Foundry “Slider” stack) as the floated content:

https://www.rightbraincomm.com/ECM_Temp/

The content lays out as intended on desktop browsers, but on mobile devices, the text (all or part of the text, depending on the device) is obscured by the floated content until the 2nd image in the sequence of images shows (at which point the text shifts downward, below the floated content, so that the text is finally fully visible).

I’ve used the Float stack with the Slider stack as the floated content, without encountering this issue, on this same website, in fact; check out this page, for instance:

https://www.rightbraincomm.com/ECM_Temp/Rebecca-Eldridge/

So perhaps the issue is related to the fact that the Float stack (with the Slider as floated content) is within an accordion stack? Any insights would be appreciated. I’d be happy to send a link to my RapidWeaver project as needed, Adam.

And thanks!

-Javier Garriz
javier@rightbraincomm.com

2

Sliders inside of hidden content (like an Accordion) shouldn’t be attempted. Since it is responsive, when the page loads the Slider calculates the space it has available to it in order to size the slides appropriately. Being hidden in an Accordion it thinks it has no space at all, and sizes itself accordingly. Once opened the Slider can try to resize itself if the slides advance, but there’s things that can happen that could thwart this, too.

Best practice is to keep things simple. Don’t pile up complex content. Stacks that hide content (like a Slider), inside of a stack that hides content (like an Accordion) is a usually a recipe for problems.

1 Like
3

THANKS, Adam, for the lightning-quick response and explanation. I’ll swap out the slider for a static image, in this case.

Again, THANKS!

2 Likes