Why do my blog images appear larger than expected in debut theme?

[Keren222]

Hello,

I am adding my blog URL.

For some reason the images appear bigger than they really are, that is leading for a gray blank between them. 

I also added a screenshot.

All the images are the same size.

Does anyone know what the problem is and what is the best size for the cover image for a blog post in debut theme?

Thank you

[LuckyNigam]

Hi @Keren222 

Give me your website url So I'll check whats the issue and give a better solution for you.

Thanks

[Keren222]

https://ecologicalmethod.com/

Thank you

[Scott-Marshall]

Hi @KE,

I'm not seeing any issues on my end, therefore, it looks like you may have found a solution. As for the recommended size, I'd recommend 600 x 600px for a three-column layout.

Let me know if you need any help in the future!

Cheers,

[Keren222]

Thank you.

I fixed it on the desktop but there is still a problem with the mobile display,

Can you take a look at the mobile screen?

[Scott-Marshall]

Hi @Keren222,

You can head into the "theme.css" file and remove the following code found on line 3913:

.article__link:not([disabled]):hover .article__grid-image-wrapper::before, .article__link:focus .article__grid-image-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--color-image-overlay);
    opacity: var(--opacity-image-overlay);
    z-index: 1; 
}

[Keren222]

Thank you for your time but that is not my intention. I don't want to delete the hover option, I just want the hover to fit the image.

is there a way to do it?

[Scott-Marshall]

Hi @Keren222,

It's certainly possible, however, you'd need to refactor quite a few elements based on how the blog page in the Debut theme has been structured.

Cheers,