[Resolved] Page Header

[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.

[Tom]

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 🙂

[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.

[Tom]

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;
}

[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.

[Tom]

You definitely can 🙂

[Author]

Posts