[Support request] The featured image for a single article is resizing on different screen sizes

[Charbel]

Hello Team,

I have a question in regards to the (featured image) of each article, not WP POSTS.
I have noticed that the features image is resizing automatically when I browse the article from different screen size (e.g. 24″ or 27″ monitor).

The featured image that I am using is (700px X 400px) is looking good on the 24″ monitor, but on the 27″ monitor it’s zooming and the side is cropping.

How can we make sure that the featured image remains the same regardless of the monitor size? This is only for the image on top, however, the images within the article are correct.

Example check this article on different screen size: https://charbelnemnom.com/replace-failover-datacenter-with-azure-site-recovery/

Your help is highly appreciated.

Thank You!
-Charbel

[David]

Hi there,

always fun trying to keep background images the size you need them 🙂

Simple fix may be some CSS to reduce the page-heros top padding when the screen hits a certain size eg.

@media(min-width: 1600px) {
  .page-hero {
    padding-top: 24%; /* Currently hero is set to 28% */
  }
}

May need to tweak the min-width and padding-top a little.

[Charbel]

Thank you @David for your continuous support, much appreciated!

You are great!

I have used your CSS and adjusted the padding-top to 21%.
It looks so much better now.

@media(min-width: 1600px) {
  .page-hero {
    padding-top: 21%; /* Currently hero is set to 28% */
  }
}

Could you please check it now and let me know of any suggestions for improvement if any?
https://charbelnemnom.com/replace-failover-datacenter-with-azure-site-recovery/

Many thanks David!

[Charbel]

Next question @David, what is the best and recommended featured image (single post) size to use please for my Theme?

700px X 400px

[David]

The issue, background images fill the size of the container they are applied to. When there is variable size content within the content eg. A Post Title could be a single line or multiple lines long, this affects the container height which forces the background to resize. So when there are variables involved there is no ideal image size.

If you’re happy with how the featured image of the post you linked to is displaying – then i would stick with that size.

Or if the Image is really important then you may want to NOT USE the header element and have the image display above the the Title/Meta and content

[Charbel]

Thank you @David for the great details!

I would stick with 700px X 400px image size so the featured image will fit the container.
The content is more important than the image, I am trying to find the balance and optimum size so I can use it for every post.

Many Thanks!

[David]

You’re welcome

[Charbel]

Hello @David,

Please note that after using your CSS. My Homepage got broken. The single posts articles are ok.

@media(min-width: 1600px) {
.page-hero {
padding-top: 16%; /* Currently hero is set to 28% */
}
}

I can see additional whitespace on the home page hero only below the Black Menu, could you please how to fix this without breaking the images for a single post?

Thank You!

[Charbel]

Please check here: https://charbelnemnom.com/

And then check here: https://charbelnemnom.com/backup-best-practices-in-action-the-backup-bible-complete-edition/

[David]

You will need to create separate CSS rules.
For example:

@media(min-width: 1600px) {
  /* adjust padding for home page only */
  body.home .page-hero {
    padding-top: 24%; /* adjust this suit */
  }
  /* Adjust padding for all other pages */
  .page-hero {
    padding-top: 16%;
  }
}

[Author]

Posts