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

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

Home Forums Support The featured image for a single article is resizing on different screen sizes

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1649886
    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

    #1650046
    David
    Staff
    Customer Support

    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.

    #1650083
    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!

    #1650123
    Charbel

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

    700px X 400px

    #1650217
    David
    Staff
    Customer Support

    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

    #1650229
    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!

    #1650447
    David
    Staff
    Customer Support
    #1654135
    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!

    #1654168
    Charbel
    #1654340
    David
    Staff
    Customer Support

    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%;
      }
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.