-
Cannot seem to get the outer container in the footer element to be full width, with the inner container contained.
https://paddyduncan.com/deerparkresidents/
I’ve gone through all the settings and tried various things that *should* work – but they don’t. It’s either full width for the outer container AND the inner container, or the outer container is contained, with white space on either side. I have another, slightly older GP site on which this worked perfectly – but there was a “flex-child” setting for block alignment that I applied to the inner container that isn’t available on the new version of GP.
Here’s the other site so you can see what I want: https://robertfripp.ca
-
Hi there,
Your footer element is full width. Have you already figured it out?
This is what I see:
https://app.screencast.com/Xzb7owm8ZE1QH -
Yes – the footer is full width at the moment, but I can’t get the inner container (content) to match the width of the rest of the page. Please see the Robert Fripp site where I do have it working as I would like to have it here, but which was created with an earlier version of GBP, which has “flex-child” applied to the inner container – not available on this version of GBP).
It’s either/or – either everything full width or everything contained (which looks bad if the browser window is wider than the container width), so until I get this solved, it’s full width, only because I cannot figure this out.
-
You can select the inner container gb-element-a9c49c2f, and set the max-width to 1200px, margin-left and margin-right to auto, padding-left and padding-right to 40px.
And on mobile, set padding-left and padding-right to 30px.
-
Well, that’s interesting – I didn’t think of applying those settings to the Grids INSIDE the inner container – but you gave me the reference number and that was to the first grid, and voila – that worked. (Applying those settings to the inner container enclosing the grids did NOT work – I’d tried exactly that already) I had to apply it to the second grid as well, of course, and then there was the issue of the border on the grid, which of course was now too wide as the inner elements had padding on them. So I just put top borders on the second grid containers – and now it’s the way I intended it to be.
Still curious as to why you cannot make that inner container (.gb-element-c17c441a) a max width without affecting the outer (full-width) container (.gb-element-3a660b1f) as well. And yes – I did put 100% on the outer container – tried just about everything I could think of there.
-
Hi there,
The outer container looks “affected” when the inner container has a max-width because the background color is currently applied to the inner container. This means the color follows the inner container’s restricted width instead of spanning the full width.
To fix it, move the background color setting to the outer container. That way, even when the inner container is constrained by a max-width, the background color will still extend across the entire section.
-
OMG. I didn’t realize that the background colour hadn’t been applied to the outer container!!! That’s it – that’s why everything I tried didn’t work. Not some magic or mysterious flex thing I didn’t understand. I-D-10-T error. 😀
Fixing that and changing all the other settings so they applied to the inner container has it exactly as I wanted – without quite as many fiddly bits.
Thank you, Alvin!
-
No problem, glad to hear it’s all sorted! 😀
- You must be logged in to reply to this topic.