Hiding Stacks on Mobile

Hey All,

I am building a site which I am using Jumbotron on the home page. Works as expected in Full and Tablet, but cuts to much off to much of the image in mobile. So I decided to use a Banner stack for mobile. Hide the banner stack in Full and Tablet and show in mobile, and opposite for Jumbotron.

Except, both stacks show up in Mobile, the rest work as expected.

I tried the Visible Foundry stack and I get the same behavior. BTW, I am curious why this stack when the functionality is built into Stacks?

Thanks for any advice you can send my way.
Blessings,
—Mark

Hey there @garageshop –

Do you have a project file I can take a look at? If so, create a ZIP file containing it and send it over to me, and point me to the page you’re working on.

This is because the breakpoint values are slightly different in Foundry. The Foundry Visibility stack keeps in line with all of the Foundry breakpoints to keep everything in sync. On top of that, that feature in Stacks did not exist when I wrote Foundry.

Thanks Adam, I wil zip it up and send it over, Thanks forsaking a peek. Only one simple page at this point, just the home page.

Ah ha, that is why visibility! That makes sense!
Thanks

Blessings,
—Mark

Hey @garageshop, I took a look at your project file – the reason you’re running into this problem is you’re using the Hero mode in the Banner stack. To make itself go full browser and to ensure that it is placed where it needs to be, it is removed from its original stack and placed elsewhere in the page hierarchy. This means after the page loads the banner is outside of the stack whose contents you’re hiding.

Ah ha!

Thanks Adam for taking a look and pointing me in et right direction.

I LOVE the fact there are so many option and my little brain gets confused which option I tried last!

Great software and support!

Blessings,
—Mark

1 Like