I am building a footer section with a grid plus + a container plus inside of each grid cell in order to adjust the padding for the contents.
I noticed that as long as I choose custom basic in the padding or margin settings of container plus, it shows correctly in edit AND preview.
as soon as I choose custom advanced in padding and margin settings, only edit mode is correct. in preview I have zero padding/margin.
what am I doing wrong? any idea?
Are you adding the units into the boxes. i.e. 100% or 100px or 10rem etc
2 Likes
Yep - as Gary says. And also make sure you have a value in each of the boxes. What you see in Edit mode is how it looks at one of the breakpoints. When you preview you are likely viewing at a different breakpoint.
Also - keen to see what you are trying to build in the footer as you wouldn’t generally need to drop a Container into a grid item. There may be other ways to achieve what you are after within the grid items themselves.
yep, that was the missing point. should have read the tooltip
there is no padding/margin option in the grid item options (only in the main grid plus stack options, but these are not advanced in means of setting different values for different breakpoints), thats why I threw container plus into a grid item… is there a better way?
my grid is 20% 1fr 20% and fluid width. thats why I need padding to push text from the edge to the inside. preferably different values for mobile and desktop.
by the way > „container“: when using the container tags I end up with more containers I would usually need to build the layout. I would need some containers arround just to assign the tag(s).
is that (the container stack) something that adds noticeably to the size of the page, loading times etc?
True. I could perhaps add in an option for responsive padding in grid items. Or an option to use the padding set up in the Container Base stack.
You can’t easily do everything rrquired in terms of padding, margins and backgrounds without a few levels of divs. The code is light though and pag s load really fast. Check out a page like this demo one on something like Google Lighthouse: https://demo.shakingthehabitual.com/sth/source/monochrome-1/
That would be useful.