Responsive
SML combines responsive component properties with fluid layout scaling. Column widths, alignment, and visibility can be configured through Webflow, while rem-based dimensions scale automatically with the viewport.
Breakpoints
SML follows Webflow's four main breakpoints.
Breakpoint
Viewport width
Column divisions
Desktop
992 px and above
12
Tablet
991 – 768 px
6
Mobile Landscape
767 – 480 px
6
Mobile Portrait
479 px and below
4
Each breakpoint has its own Column width property, allowing layouts to adapt without breakpoint-specific utility classes.
Layout scaling
SML uses rem for typography, spacing, and many other layout dimensions. Instead of keeping the root font size fixed, the framework adjusts it based on the viewport width.
This allows dimensions to scale proportionally without defining separate values at every screen size.
Desktop
On desktop, the root font size scales fluidly using the following CSS:
html {
font-size: clamp(
11px,
calc(0.056686rem + 1.01744vw),
18px
);
}
The calculation adjusts the root font size as the viewport changes, within the limits defined by clamp().
For example, a spacing value of 2 rem increases proportionally when the root font size increases.
Tablet and mobile
On smaller screens, SML switches to fixed root values:
@media (max-width: 991px) {
html {
font-size: 14px;
}
}
@media (max-width: 767px) {
html {
font-size: 16px;
}
}
This provides predictable layout dimensions on Tablet, Mobile Landscape, and Mobile Portrait.
The scaling system is already configured in SML. Developers generally only need to adjust the corresponding Webflow variables to match their design.
See the Variables documentation for configuring spacing and the Typography documentation for text sizing and accessibility preferences.
Responsive component properties
Column widths
The Column component provides independent layout dropdowns for all four breakpoints.
By default, a Column uses Grow, allowing it to expand into the available space. When a specific width is needed, select one of the available column divisions.
For example:
Breakpoint
Width
Desktop
3 / 12
Tablet
2 / 6
Mobile Landscape
3 / 6
Mobile Portrait
4 / 4
When applied to multiple columns, these settings allow four columns per row on Desktop, three on Tablet, two on Mobile Landscape, and one on Mobile Portrait.
Columns also provide Align and Justify properties for positioning their content.
Rows and alignment
The Row component controls the arrangement of its contents through properties such as direction, alignment, justification, gap, and gutter.
For example, a Row can change from a horizontal to a vertical arrangement without changing its component structure.
Use these properties wherever possible before introducing additional custom CSS.
Responsive visibility
Columns and other supported components provide separate visibility controls for each breakpoint:
- Hide on Desktop
- Hide on Tablet
- Hide on Mobile Landscape
- Hide on Mobile Portrait
Each can be enabled independently.
Responsive visibility can also be used to vary spacing between breakpoints. For example, use a spacing-l component that's visible only on Desktop, followed by a spacing-s component that's hidden on Desktop. This allows different spacing without custom CSS.
Working with responsive overrides
Start with the default component behavior and adjust only what the layout requires.
A Column set to Grow may already work across multiple breakpoints. If so, there's no need to assign explicit widths.
The same applies to alignment, spacing, and visibility. Use the available component properties to create the responsive layout, adding custom CSS only when the design requires behavior the framework doesn't already provide.
