New in Academy X!

Hey creators, we just released new video tutorials for you in Academy X. They’ll hopefully answer lots of your questions about 2 of our flex layouting tools: Stack and Layouter .

Also, check out some new Masters capabilities, detailed in this new video .

9 Likes

Quick question! Sometimes with banner section like that, I would like to use two buttons side by side in a banner. Is it possible to have two buttons next to each other in one stack section, then stack on mobile? I think stack is a great feature! Thank you.

Stack good for vertical alignment .
To put elements next to each other you can use a container and give it a grid.
Each button should sit in its own cell inside the container grid.
Then you can Stack the container.
See example:

Hey Lewis!
A classic stack works for elements that are arranged above and below each other, so there are 2 other ways to achieve the effect you’re looking for.

1. Use a stack with negative margins
a) Stack both your buttons
b) Set the top margin of the bottom button to be the height of the top button

2. Use a grid
a) Add a container with a 2x1 grid inside
b) Place a button in each cell
c) Stack your title/paragraph text with the container

Option 2 will prevent overlap on smaller screens, so that’s the recommendation from the product team here :slight_smile:

Hope that helps! :pray:

Thank you both, super helpful. I guess I was secretly hoping not to use a container and just add it side by side. Thank you for taking your time to record/write useful responses.

Hi,

thanks for the good tutorial.
I was wondering whether there is a tutorial on the best practice for creating a form like page which include text elements and/or input elements, i.e how to layout them, (use grid + stacks…)?

Thank you a lot for take the time for such a good information.
cheap roof cargo box