Hello everyone,
I’ve been using Wix Studio to design new website pages, but I’m encountering some frustrating responsiveness issues. I have four breakpoints: Desktop Large, Desktop, Tablet, and Mobile.
The main problem occurs when using cells. Even though the spacing is well-adjusted for vertical rhythm, the cells don’t always hug the content properly, especially on larger screens. As the text expands horizontally on wider screens, the cells sometimes fail to adjust accordingly, leaving large chunks of whitespace.
Example of the white space when published:
What are the main points I need to pay attention to on Wix to avoid this issue?
Coming from Figma and Framer, I find designing on Wix quite challenging, especially when aiming for good responsiveness and pixel-perfect spacing between elements.
Hi, Bruno_Sato !!
In Wix Studio, there is a feature called “Stack” that helps adjust the spacing between elements more effectively. Have you already tried using it?
To briefly explain how it works: Select an element, then hold down the Shift key and select another element. This should bring up a menu with the “Stack” option. Once selected, the elements will be stacked together. You can then set the spacing between the stacked elements, making it easier to control their layout. 
1 Like
if you change the cells to advanced CSS grids you will have more control over the sizing.
1 Like
Yes, I use stacks for pretty much everything. My problem seems to be with the ‘cells’. The section doesn’t always hug the cells at every breakpoint. Sometimes, everything looks good on desktop, tablet, and mobile, but as the screen size increases on mobile, I notice increasing whitespace between the group of cells and the end of the section.
Thanks, Dan! I’m gonna give the advanced CSS grids a try.
1 Like
you can set the rows/columns to max content or auto and it should sort your issue.
