Foundry - Issue - Using two hero banners: one for mobile and one for tablet/desktop

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!

Cheers,

Yann

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.

1 Like

Hi @Fuellemann,

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?

Cheers,

Yann

If you disable the “Hero Banner” option, then it will work. In this case, you have to adjust the banner height manually.

1 Like

Hi @Fuellemann,

I get it. However these won’t be Hero Banners anymore.

Thanks,

Yann

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.

Hi @elixirgraphics,

I understand, thanks you for your answer!

Have a great day,

Yann