[Resolved] Website fluid problem page header

Home Forums Support Website fluid problem page header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #118717
    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!

    #118802
    Tom
    Lead Developer
    Lead Developer

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

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

    That should do it 🙂

    #118916
    Damiaan van Vliet

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

    #118950
    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!

    #118956
    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.

    #118973
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    .inside-page-header-container.grid-container {
          max-width: 100%;
    }
    #119127
    Damiaan van Vliet

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

    #119223
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.