Resize Featured Image

Hey there.

Looking at your site it appears like the image is sized like that so that it fits perfectly in the head of the article. The CSS is:

.featured-image {
left: -20%;
width: 140%;
}

So you could look at taking the width down if you wish to, that’s done by changing the percentage “width: 140%;”. You could then add the CSS back either in a child theme:

https://codex.www.ads-software.com/Child_Themes

Or through a simple plugin like:

https://www.ads-software.com/plugins/simple-custom-css/screenshots/

Let me know how that goes for you.

Take care.

Thanks! That definitely helped in reducing the size of the featured image frame.

I like how images are stretch full width but I would like to reduce the height of the post header image. I don’t want to shrink, just to crop it about half the height. Is that possible?

Thanks

Yes, this is easily done by changing the padding-bottom value of .featured-image.

I know that’s a bit unintuitive, but if you change the padding-bottom value to half of what it is now, the image will be half as tall.

Works great, thank you. ??

You’re welcome ??

Is it possible to change the proportion of the featured image size to be 16:9?

Thanks

Sure, by altering the height of the featured image with padding-bottom you can make the image any ratio you’d like.

For 16:9, the padding-bottom value should be set to 75%.

There is now a Custom CSS section in the customizer of Ignite, so I would recommend adding your CSS there if you have not already created a child theme.

Million Thanks!

This is a great theme.

You’re welcome ??

Dekisugi,

Ben’s one of those awesome developers that supports his own themes, not everyone does.This is a pretty nice looking theme.

If you have a few moments free you might like to consider leaving him a cool review, I’m sure he’d like that ??

https://www.ads-software.com/support/view/theme-reviews/ignite

Have a great weekend!

Hi Ben,

I am having a problem with my feature image. People can only see it if using a computer. All but one stopped appearing if using an iphone, ipad, ipod, etc.
I have to say that I do not have knowledge of css. Please help me.

my website is
https://www.claugary.com

Have you used any of the above CSS? If not, it may be a plugin-related issue.

You can quickly bulk deactivate/reactivate your plugins using the Bulk Actions dropdown in the Plugins menu. If this fixes the problem, reactivate the plugins one-by-one until you find the one causing the issue.

Oh woops, I was commenting while you linked to your site.

I see what’s happening now. It looks like there is a plugin or something serving a different theme on mobile, but then if I click the “View full site” link at the bottom it takes me to the Ignite version.

The reason the images aren’t loading on mobile is because there is just too much for the device to download. There are quite a few images and they are all very large. If you resize your images and install the EWWW Image Optimizer plugin, this will solve your problem.