-
Just coming back to GP 2.0 to update a site and have been looking at the “Creator” base template.
Wondering first of all if there is a cheat sheet / learning portal for things that have changed. In this template there are sections called 50% column container (within a main container). Are these preset options somewhere as I cant find them to use again?
But also the way these have been set up seems to be with some kind of short code and I cant work out how to make them for example 70/30eg this code is in width – calc( var(–gb-container-width) / 2 )
thanks, Renee
-
Hi Renee,
In this template there are sections called 50% column container (within a main container). Are these preset options somewhere as I cant find them to use again?
That’s not a preset. The block is just renamed—there are no presets or global styles applied to that container. Everything is set at the block level.
Technically, that section is just a flex layout. Both columns inside it use flex-basis to control their width. So if you want a 70 / 30 layout, you just need to adjust the Flex Basis values under Layout > Flex Layout.
You could also set the column widths to 70% and 30%, but using flex-basis is better because it works more naturally with flexbox. It plays nicely with responsive behavior, avoids width overflow issues, and gives the browser more flexibility when space changes (especially on smaller screens).
eg this code is in width – calc( var(–gb-container-width) / 2 )
What that CSS does is it takes a container’s width and divides it by 2, giving you half of that width. So if your container is 1200px wide, this would give you 600px. It’s useful when you want something to be exactly half the size of its container.
These articles may help explain it a bit better:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/calc
- You must be logged in to reply to this topic.