[Resolved] Full Width Featured Image

Home Forums Support [Resolved] Full Width Featured Image

Home Forums Support Full Width Featured Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2356360
    Francis

    For starting point, here is one of the post in concern.

    The container width is 1200px and all my featured images (green background) are all 1200px(width) by 800px(height) size. And there are no paddings and margins affix, and I even added width:100% css attribute, but my featured image still won’t occupy the width full space. Any help?

    #2356856
    Leo
    Staff
    Customer Support

    Hi Francis,

    Not sure if I fully understand.

    Are you wanting the featured image to be full width across the entire screen width?

    If so can you make sure the featured image is at least 2000px in width? Then this CSS should work:

    .featured-image.grid-container {
        width: 100%;
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    Let me know ๐Ÿ™‚

    #2357583
    Francis

    Hi Leo

    The code didnt work. My container width under GP customizer is set to 1200px (which is the way we want it) and the featured image width is also 1200px. It should be responsive that way regardless of the screen width right? Since Generatepress is a responsive theme. Using 2000px for an image is too big in file size once I started adding more posts.

    Is there another workaround?

    #2358045
    Ying
    Staff
    Customer Support

    Try this CSS instead:

    .featured-image.grid-container, .featured-image.grid-container img {
        max-width: 100%;
        width: 100%;
    }

    Leo asked for a bigger image file because when the image is set to full width, it will get pixelated as it’s been stretched.

    But if you don’t mind, then there’s no need to switch to bigger image files.

    #2358762
    Francis

    Wow, thanks a lot Ying. That did the trick. Yeah I dont mind the image being distorted. You save my day. Have a good one!

    #2359214
    Ying
    Staff
    Customer Support

    You are welcome ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.