[Resolved] Page Header

Home Forums Support Page Header

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #114330
    Andy

    Hi,

    I’m trying to make the Page Header on my home page 100% width, at present it is being contained within the container width. I have the container type set to full-width in the content tab. I’ve tried targetting it with CSS using max-width: 100% but this hasnt worked either.

    I also tried using a full-width Section and setting it as a background, this made the image full-width as required but it only displayed part of the height of the image because there was no content within the section editor.

    Any help appreciated.

    #114331
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Is it just an image with no content? I have to make that full width option apply to images as well.

    For now, you can do something like this:

    .home .page-header-image.grid-container {
          max-width:100%;
    }
    
    .home .page-header-image img {
          width: 100%;
    }

    Let me know if that works or not 🙂

    #114334
    Andy

    Thanks, I think I tried this it works for the width but it also increases the height. I want to keep it at a max-height of 480px if possible. I know its difficult to do that and keep it responsive at the same time.

    #114339
    Tom
    Lead Developer
    Lead Developer

    Hmm, that would be trouble, as it will distort the aspect ratio of the image and cause loss of quality.

    You can always play with it by adding a height attribute to this:

    .home .page-header-image img {
          width: 100%;
          max-height: 480px;
    }

    Also, you might want to remove the empty space above the header:

    .home .page-header-image.grid-container {
          max-width:100%;
          margin-top: 0;
    }
    #114340
    Andy

    Your right adding a a height distorts the image. I think some sliders get around this by slightly zooming into the image to keep the aspect ratio correct. I may have to try one, I believe I could add the slider shortcode to the page header content.

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