Tablet and mobile
How tablet and mobile frames become each builder's own breakpoint settings.
Name the frames
Draw tablet and mobile versions next to your desktop frame and name them after it, for example "Home · Tablet" and "Home — Mobile 375". FrameKit finds them when you paste the desktop frame's link.
What gets written
Layers are matched to the desktop frame by path. What differs (type sizes, padding, gaps, a row stacked, a layer hidden) becomes the builder's own breakpoint setting. Up to three breakpoints are read from your frames.
Per builder
| Builder | Tablet | Mobile | Hidden layer |
|---|---|---|---|
| Bricks | …:tablet_portrait (≤ 991px) | …:mobile_landscape (≤ 767px) | _display:<breakpoint> none |
| Elementor | …_tablet controls (≤ 1024px) | …_mobile controls (≤ 767px) | hide_tablet / hide_mobile |
| Divi 5 | tablet values (≤ 980px), column flexType | phone values (≤ 767px), columns stacked | disabledOn |
| Oxygen 6 | the selector at the breakpoint nearest 1023px | the selector at the breakpoint nearest 767px | display: none at that breakpoint |
| Gutenberg | type and padding fluid through clamp() | core/columns stack on phones | metadata.blockVisibility.viewport |