Make featured image at top of blog posts full column width

kithindin

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

https://snag.gy/TEk3hQ.jpg

We want them to be like this:

https://snag.gy/qMJmkP.jpg

Bryan

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

kithindin

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

kithindin

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.

Bryan

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

kithindin

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.

https://snag.gy/daoOKh.jpg

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