Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Nov 25, 2020
Edited: Nov 25, 2020

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.









Nov 25, 2020

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.

Nov 25, 2020

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:

Kapture 2020-11-25 at 15.58.18
.mp4
Download MP4 • 8.45MB

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 :)


Hope that helps! 🙏

Nov 27, 2020

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.

Nov 28, 2020

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...)?

Editor X

Design your boldest creations.