I’m having trouble with
My website’s statistics section isn’t displaying consistently across desktop, tablet, and mobile screen sizes. The numbers and descriptions look fine on desktop, but spacing, alignment, and element positioning become difficult to manage at smaller breakpoints.
Working in
Wix Studio Editor
Site link
What I’m trying to do
I want the statistics section to remain clean, balanced, and readable across all screen sizes. Ideally, the statistic blocks should adjust their layout automatically without overlapping, excessive spacing, or text wrapping awkwardly.
What I’ve tried so far
I’ve adjusted the element sizes, spacing, and alignment at different breakpoints. However, I’m still unsure whether a grid, flexbox layout, or separate breakpoint adjustments would work best for this section.
Extra context
For those experienced with Wix Studio, how would you structure this type of section to make it responsive? Are there specific container settings or layout techniques that help keep statistic blocks consistent without having to manually fix every breakpoint?
Any practical suggestions would be appreciated. Thanks!
Hi, for a stats row like this I’d use a grid on the container instead of adjusting each block per breakpoint.
Put all the stat blocks inside one container and set that container’s layout to a grid in the Inspector, with one column per stat on desktop (each column 1fr) and a fixed column and row gap, something like 24px. Each cell then holds one stat.
Inside each cell, put the number and its description in a small vertical stack, centered, with a fixed gap between them. Give both text elements a 100% width instead of a fixed pixel width so they follow the cell.
Then on tablet change only the grid itself to 2 columns, and on mobile to 2 or 1 depending on how long your numbers are. That should be the only breakpoint change you need, everything inside reflows on its own. If a long number like “10,000+” still wraps on mobile, lower the font size of the number at the mobile breakpoint.
One thing that often causes the mess you describe: values you already set on tablet and mobile keep overriding the new layout. I’d clear those breakpoint overrides on the old elements first (right-click menu) and start from the desktop version.
A flex stack with wrap works too, but grid is easier here because every block keeps the same width and the rows stay lined up.