Hello,

The header will adjust the height according to the image height so once use the image of smaller height.

Even if this doesn’t resolve the issue, kindly let us know so that we will provide you with the CSS.

Regards.

Hello,

Could you please provide us your site URL so that we can provide you with a precise fix that will help you decrease the size of the image

Regards.

Hi,

I am interested in doing the same for my site as it is not adapting to the change in image size– please could you provide the custom CSS for editing the header image size (on any page).

Thanks

Hi,

The site is https://www.therocketsurgery.org/blog/ and I’m referring to the header images at the top of each of the pages (Archive/blog, About, Get Involved, etc.). I would like to reduce the height of the images by about 1/3rd.
Screenshot: https://ibb.co/SRWrdqC

Thanks!

Hey, I have more questions! (Thanks for your help so far 😉 )
Firstly, how can I adjust the size of the header image (as above) for all blog posts? I.e., when viewing a blog post page the featured image shows at the top and is too large.
Secondly, how can I adjust the width of the content of blog posts? I would like them to be more central, with more padding at the sides (like https://www.brainpickings.org/).

Thanks again,
Kingston

Hi,

Sorry, but that is the wrong adjustment. Perhaps I confused you when I said ‘header’, what I mean is the “featured image” for both pages and posts. A few weeks ago (above) you gave me the CSS to add padding and reduce the height of the featured image(s) on web pages.

Actually these featured images (on both pages and posts) have been causing me a lot of problems with sizing and inconsistency, since for example with blog posts the image will be displayed differently on the actual blog page than it is when it is promoted in the hero section, or as a thumbnail in the archive.

What I need is the CSS/code to make all the featured images on webpages or blog posts automatically fit the original image size (instead of cropping them etc), or a solution that avoids different images being displayed.
Here is a link to the ‘featured image’ component I mean – https://ibb.co/XtZ9FNW
As an example of the image resizing, see the hero post on therocketsurgery.org, and how it appears differently to the image at the top of the post – https://www.therocketsurgery.org/1-phylos-sophia-love-of-wisdom/ – (I had to add a white border to make it fit at the top of the post)

Hi again,

Is there any way I can remove the featured (header) image from the top of blog post pages only? Such as maybe the same code you gave me before, except for blog posts not for general site pages, and setting the height to zero?

e.g. with the following, except the correct replacement for “page” to make it only effect blog post pages:

.page #page-site-header {
padding: 135px 0;
}