Black Friday Sale! Get up to $40 off GP Premium!Learn more

Fluid full width featured image

Home Forums Support Fluid full width featured image

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #158610
    Are Martin

    Is there any way to make the featured image fluid and full width (entire viewport) when page-header/featured image is set to above header?

    I know that this is an option with the page header add-on when using a background image and I have already done this on some pages.

    It would be convenient if the standard featured image behaved in the same way when the page header add-on is not in use.

    I have a lot of old posts with a featured image that i would like to be fluid and full width and while i could use the page header add-on and go back and change them all one by one it would save me a lot of work if there was some css trick to make them all fluid and full width and then I just set the customizer to place it “above content” to make it appear full width above the post.
    If this is at all possible I would also like to be able to set a max height for the featured image?

    #158635
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    It’s possible to make them full width, but not full height without losing quality of the image (it wouldn’t look good).

    Are you wanting to do it on all posts and pages?

    #158643
    Are Martin

    Hi, thanks for quick reply! I want it to apply to all posts with a featured image set. I don´t want the image to be full height, I would instead like to limit the height to about 500px so the image appears sort of like a large full width banner.

    #158644
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try:

    .page-header-image-single.grid-container {
          max-width: 100%;
    }
    
    .page-header-image-single img {
        width: 100%;
    }
    #158648
    Are Martin

    This works! 🙂 The image is now full width. However the height of the image pushes the content below the fold. I would also like to limit the height of the featured image the way it is possible on the page header add-on so the image becomes like a sort of banner.

    #158684
    Tom
    Lead Developer
    Lead Developer

    If you limit the height, you’ll squish your image and it will lose quality/look bad.

    .page-header-image-single img {
        max-height: 200px;
    }
    #158689
    Are Martin

    Ok, is it possible to do it like in the page-header where there is a crop effect?

    #194918
    Joseph

    Tom, in Sections when I add the background image in Fluid the height is minimal although the background image is set to at least 960px in height in mobile view. It looks good on desktop but short in mobile view. This will give you an idea of what I am talking about.
    Looking at this in mobile view you will see the background stops at the top.
    http://www.sa-dwts.org/dancers/

    How can I get the full cover in mobile view?

    Thanks in advance.

    #194959
    Tom
    Lead Developer
    Lead Developer

    The columns plugin you’re using isn’t clearing the container once it’s done with the columns.

    Try adding this after the shortcode:

    <div class="clear"><!-- clear the columns --></div>

    #551320
    anand

    this will work

    .page-header-image-single img {
        width: 100%;
    	object-fit: cover;
          object-position: 0 0;
    	height:400px;
    }
    

    object position to cut the image from the top without which you can have the center portion

    #602959
    Afeef

    None of the above worked for me, neither in parent theme CCS editor or child theme style sheet.

    #603149
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link me to one of the pages where it should be working?

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.