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

Technical Q&A
1

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?

Captur5472e.JPG
Captur5472e.JPG1653×804 53.6 KB

Thank you

2

Hi @Keren222

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

Thanks

3

https://ecologicalmethod.com/

Thank you

4

Hi @Anonymous ,

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,

5

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?

6

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; 
}
7

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?

8

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,