[Resolved] Website fluid problem page header

[Damiaan van Vliet]

Hi Tom,
I am busy developing a website which has a fluid layout.
What I’ve done so far is make the header and footer layout set to fluid.
I have added a 1920×500 image (and tried slider but thats another story) to the page header (add-on) and set it to fluid.
The problem is that the image on a 27″ screen still has left and right a gap. It is as wide as the container width I have set to 1500 (I could not choose fluid).

So basically the question is: what steps do I need to take to make a website fluid.

Is it necessary to use sections (that add-on I have).

Thanks!

[Tom]

You can override the pixel width set in the Customizer with this CSS:

body .grid-container {
      max-width: 100%;
}

That should do it 🙂

[Damiaan van Vliet]

Great Tom!
An idea to have that option in GeneratePress. But with this it is also solved 🙂

[Damiaan van Vliet]

Sorry Tom, I thought it is resolved but almost.
For fully fluid design it is solved but when I only want the header, footer and page-header to be fluid there is a problem.
Header, footer fluid is easy.
Content some parts fluid is easy with the add-on.

But the page-header add-on I cannot get it set to fluid. At least, I select it to be fluid and it is still as wide as the content (e.g. 1100px).

Thanks!

[Damiaan van Vliet]

When I set background color on the page-header section the color is full-width.

I can solve the problem to use a section for the page-header instead and set CSS but then I have to make CSS exceptions per page because of the padding on .generate-sections-inside-container which is 40px.

I prefer a solution with page-header.

Thanks again.

[Tom]

Give this a shot:

.inside-page-header-container.grid-container {
      max-width: 100%;
}

[Damiaan van Vliet]

Great Tom, it’s working. I’m happy 🙂

[Tom]

Awesome! 🙂

[Author]

Posts