Header / Bar / Containers in rows or columns depending on viewport size

[ULinn]

Hi there,

I have a header bar with three containers, flexbox: “row”. Perfect on desktop, but not enough space on smaller screens. So I’d like to have the flexbox behaviour change to “column” on smaller screens. How can I do this?

Of course I could design a second header with viewport “column”, but I’d prefer to have only one header, if possible.

Best regards

Uli

[lely]

Hi Uli,

For BAR, set the following FLEXBOX settings:

For each of your column, set SELF FLEX > FLEX BASIS. Adjust the value that is suitable for all viewport:

See this: https://screencast-o-matic.com/watch/cYfQ6uawRM

Hope this helps.

[ULinn]

Hi lely, great help, works perfect. Thank you!

All the best!

Uli

[nabeel]

Glad we could help Uli.

Cheers!