Hi @elixirgraphics ,
I hope you’ve been keeping well!
I’m trying to use two hero banners on my homepage.
One is supposed to be displayed only on mobile devices and the other one on tablet and desktop.
In order to do so, I’m using Foundry’s Visibility stack.
Unfortunately, whatever device is used to browse the page, the two hero banners are displayed.
Here’s the project file : Dropbox - File Deleted
Do you know what’s wrong, please? I look forward to hearing your thoughts!
I think this will not work, as the hero-banner overrules the visibility stack. I would use just one banner for both and use the margin stack to define the placement of the content inside the banner.
You can use the visibility stack inside the banner to show/hide content as well.
Thank you for your quick answer!
However, as I’d like to use two different images (one for mobile and one for tablet/desktop), this will not work.
Is there no way to do it?
If you disable the “Hero Banner” option, then it will work. In this case, you have to adjust the banner height manually.
I get it. However these won’t be Hero Banners anymore.
You cannot use the Hero mode for the Banner stack within a Visibility stack. The Hero mode moves the banner outside of the visibility stack in an effort to make it display correctly as a hero banner. What you’re looking to do is not an option of the stack.
I understand, thanks you for your answer!
Have a great day,