I’ve set the background of the page to be the same color as the background of the groups, but it’s showing up as true white (#FFFFFF)
The max width of those groups showing isn’t set, so I expected them to expand indefinitely
Here’s what I actually want:
On mobile views (e.g., smaller widths), the groups narrow to the minimum width I’ve set. Content within those groups stacks accordingly. There’s no horizontal scrolling.
On desktop views, groups can expand to the maximum widths I’ve set.
Everything in between stacks and wraps proportionately, which I’ve handled somewhat with conditional breakpoints and appropriate column/row layout choices
For additional context, my page contains:
Text (the largest is an H1)
Repeating group set to wrap horizontally
Popup that I’m also struggling with on mobile because it wants to center align without recognizing the proper page width
Well, you could do this in the app itself, checking if any element has a fixed layout or min-width greater than the width of the smallest device for which you intend to maintain the responsiveness. Elements with fit to content in width checked can also cause this behavior, as they will fit to the internal content, regardless of the content being larger than the screen width, except in cases where the parent group limits this element width. Another way to analyze this (which I personally use a lot to test responsiveness) is to use Chrome DevTools Inspect functionality and check the elements. This will make it possible to visually check which element has increased the width of the page off the screen.
I’m definitely improving things here. In my head, I tended to confuse “fit width to content” to mean “fit content to width,” so correcting that has helped a good amount. I’ve also used max width at 100% to help, and checked the min width of the largest item on the screen. So getting there!
