[Resolved] Full Width Featured Image

[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?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Regards,
Francis

[Leo]

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 🙂

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

[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?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Regards,
Francis

[Ying]

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.

[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!

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Regards,
Francis

[Ying]

You are welcome 🙂

[Author]

Posts