Page 1 of 1

Full width header- BS container, width 8

Posted: Sun Jun 05, 2022 3:48 pm
by LeeFoster
I'm working on a test store for a new project and I looking to have a full size header/logo image but keep the rest of the content to a container with a width of 8.

Installed Version: CE Phoenix v1.0.8.15

Re: Full width header- BS container, width 8

Posted: Sun Jun 05, 2022 4:20 pm
by heatherbell
LeeFoster wrote: Sun Jun 05, 2022 3:48 pm full size header/logo image but keep the rest of the content to a container with a width of 8.
Not sure if I understand but we have used the following css which keeps the header and footer full screen width but reduces the body content according to the max-width

Code: Select all

.body-sans-header{
    margin-left: auto!important;
    margin-right: auto!important;
    max-width: 1400px;
  }

Re: Full width header- BS container, width 8

Posted: Sun Jun 05, 2022 7:32 pm
by LeeFoster
heatherbell wrote: Sun Jun 05, 2022 4:20 pm Not sure if I understand but we have used the following css which keeps the header and footer full screen width but reduces the body content according to the max-width

Code: Select all

.body-sans-header{
    margin-left: auto!important;
    margin-right: auto!important;
    max-width: 1400px;
  }
Ok, I see what you're doing here. Set it to full and restrict the body rather than set it to 2/3 and extend the header.

I've done that but I set the max width to 67% instead of a px number.

Re: Full width header- BS container, width 8

Posted: Mon Jun 06, 2022 4:41 am
by heatherbell
LeeFoster wrote: Sun Jun 05, 2022 7:32 pm I've done that but I set the max width to 67% instead of a px number.
OK if that is what you want on all devices.
BTW, please and thanks helps.

Re: Full width header- BS container, width 8

Posted: Mon Jun 06, 2022 10:19 am
by burt
If you want something (anything) full width, take it out of the bootstrap container.