SOLVED: Header and footer always full-width

Bricks Version: 1.4beta
Browser: any i guess
OS: macOS

Something has changed in the Bricks 1.4b so that it breaks all my layouts. The header and footer inner container doesn’t adapt to site width anymore. In Bricks 1.3.7 i did all my layouts following way:

  1. theme settings set site layout to wide
  2. in header create first container that is 100vw, set bg color
  3. create another container inside this container, and add all the elements inside. This container kept the header same width as content area.
  4. same with footer
  5. with content area it was possible to make parts that are either full width or “boxed” depending if you add the content inside a container or not

Now it seems adding the container only works inside the content area (single template). Both footer and header templates are always 100vw no matter what values i’m trying to use or how many containers i’m adding inside the first one.

Hi dvelh,
Thanks for reaching out!

We’ve changed the container default styles slightly, to get one or the other problem with nested containers under control.

You need to tweak your structure a bit to make it work again:

Option 1
Use the prebuilt section layout ‘100’, which is exactly the same as option 2, but only 2 clicks away.

Option 2
Use flex-stretch and align-items: center on the outer container instead of width: 100% or 100vw.

Option 3
Keep the width: 100vw on the outer container, set it to align-items: center, and set a max-width of your desired container width to the inner container, that holds your elements.

Best regards,

Great! Thank you for such thorough explanation. Sometimes things need to be rethought and that’s totally understandable. It’s really impressive how clean the html output is now. Good work guys :slight_smile:

Options 1 & 2 are gonna do the job just perfect now that I know what to do.

Thanks again for such a clear explanation.

Kind Regards,

1 Like