How to make my component responsive
Responsive components can be easily re-used across different breakpoints and adapt their layout.
There are two ways to make your components responsive:
By Breakpoint
The most common way is to have components switch to a different layout based on the breakpoint they are currently displayed in. This is fairly simple; just create a few named variants for each breakpoint you want, like: Desktop, Tablet and Mobile.
You'll notice that variants work just like breakpoints on the canvas. They inherit layout and content from the main variant and allow you to override other variants. This avoids having to redo your work and speeds up your work by a lot.
Once you are happy, simply use the components on a page. You'll see that, if you named the breakpoints accordingly, they automatically select their breakpoint variant. You can always correct it yourself in the properties panel.
By Size
We also get a lot of questions how to make components responsive by their own size. And while that seems logical in isolation, that's not really how breakpoints work, they are always based on a screen.
There are ways to get the result anyway (using some code and an intersection observer) but if you go that way you'll quickly notice two things:
• It's much easier to reason about breakpoints by screen size in practice. It guarantees that a certain device sees a layout a certain way. If every component decides for themselves your layout can have hundreds of combinations you'll need to manage.
• The browser is very much optimized for doing breakpoints with css media queries, so that specific devices can use the right layout on load (just make the right selection of styles). If you were to do it with JavaScript, it would initially show one layout (say Desktop) and switch after the page is loaded and JavaScript executed. This causes many opportunities for layout glitches.
