Support Center Visit Demo License manager Buy @ envato

Make featured image at top of blog posts full column width

kithindinkithindin
in Blog
I would like to know what the recommended method is for making the featured image at the top of blog posts take up the full width of that column?

For example, our images come out like this
image

We want them to be like this:
image


Comments

  • BryanBryan
    Hi,
    this is not possible with this layout, if you want full images, you can set a header image and then in the page options set the template to intro header, screen: http://prntscr.com/fv8i0w
    You also should hide the featured image if you want to use this.
    thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kithindinkithindin
    edited July 2017
    Thanks for the response. 
    The Intro Header is another look entirely, which (as you know) creates a full page-width image. All I would like is that within the column (not the entire page) the featured image be full width. Currently it has whitespace down the sides, and to me it would be a minor change to the theme (to actually provide built in support) and likely only some minor custom CSS to get that featured image to take up the full column width.
    Are you saying you can't suggest the appropriate CSS to make that happen?

    Also, I'd like to suggest you add this as a feature option in the theme. There's a strong trend toward images not having unnecessary white space within their container. Just as you have made the image in the Intro Header not have whitespace within its container (the page, in that case), because that's a look people are wanting. In the same way, I'd saying that having the option to eliminate the whitespace to the sides of the featured image in the column container is also important.

    Currently, it would seem that BeTheme is coded to set the featured images to a width of 650px. I have not found a way to override that, as it's set in the image width, not CSS. But, if there's a way to overrider that with CSS, I'll find it. I was hoping you might be able to help with that.

    Cheers...
  • kithindinkithindin
    edited July 2017
    So far what I've come up with as a solution is this:
    img.scale-with-grid.wp-post-image {
        width: 900px;
    }

    Seems to be working fine, and is responsive.
  • BryanBryan
    Better use:
    max-width:900px;
    width:100%
    It is safer
    Your solution is the only one there is.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kithindinkithindin
    Okay. Thank you.
    For some reason doing it the way you suggest has no effect. The <IMG> styling over-riders so that it is 
    650 x 325.

    I have to actually set the image width to 900 for it to take up the width I require.

Sign In or Register to comment.