Archived topic
Website fluid problem page header
7 replies · Started by Damiaan van Vliet on July 5, 2015
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 1920x500 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!
You can override the pixel width set in the Customizer with this CSS:
body .grid-container {
max-width: 100%;
}That should do it :)
Great Tom!
An idea to have that option in GeneratePress. But with this it is also solved :-)
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!
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.
Give this a shot:
.inside-page-header-container.grid-container {
max-width: 100%;
}Great Tom, it's working. I'm happy :-)
Awesome! :)