Hi!
In all my designs, I have two or three standard container widths that I am using. For that reason, I set the max-width on the Row using custom CSS, because that way it stays centered.
If we turn the Global container off, we can control the max width of the row, but in case it is smaller than the viewport, it won’t have any margins against the sides in case we need them. Header has “Gutters” to solve this, and I think Row should have it as well.
Thanks!
For this I normally set the width as something like calc(100% - 5vmin) or similar. It is a work around for no gutter.
I actually don’t like the gutter and normally set it to zero in headers but I can see for consistency it would be nice to have across the board.
Howdy @Misho and @urchindesign,
Thanks for the feedback here! As part of this update, I spent some time trying to address how sizing was conveyed across all Elements, especially since each control requires it’s own line / label for the responsive sizing feature. This is why you’ll see most Elements have all the dimensions controls for the various width and height based parameters in a new Size control group. In the case of Bars, they are very unique and setup in a way very different form Sections due to what they’re trying to accomplish.
As of right now, I’d like to hold off from adding “Gutters” as an option to Rows and Grids simply due to the fact that the Theme Options reboot is on the horizon (pretty much right after this release at this point), and “container sizing” is something I will be taking a more holistic look at across the board. A big initiative of this release was trying to make things more consistent as mentioned previously, like grouping things more similarly. I also did away with the “Length” / “Max Length” terminology on the Bars (which was done originally as it was flexbox-based, but I’ve opted for a more clear “width” / “height” usage when appropriate) and added in a “Global Container” option for bars just so people could leverage that more consistently cross their site, but I have some thoughts on how to handle “gutters” if desired for users moving forward.
To @urchindesign’s point, in my designs more recently I’ve typically taken to doing something like calc(100% - 4rem), which is great as I can set a percentage width in addition to a “gutter” value that will always push my content away from the edge of the screen. This can be paired with values of less than 100% if desired to get more dynamic X-axis spacing. This all might be something we end up working in natively behind the scenes, but I want to just hold off for a moment until we get to a place where we can really think all that through from a global theming perspective.
Hopefully that helps to give a bit of perspective!