[Resolved] How can I make the thumbnail not cut, and the title comes out to the bottom?

[WOOSUNG]

The webp thumbnail size is 1200 x 628.

The screen looks cut on the mobile and the title appears next to the right side of the picture.

In the mobile How can I make the thumbnail not cut, and the title comes out to the bottom?

Address : https://www.rjjabase.com/

[Fernando]

Hi Woosung,

What if you set the Image to have an object-fit of contain? Try adding this CSS through Appearance > Customize > Additional CSS:

.blog .inside-article .post-image img {
    object-fit: contain;
}

Does this work?

[WOOSUNG]

In the mobile the problem where the title is visible next to the thumbnail has not been resolved.

When I added the code you told me to css, the thumbnail was solved.

How can I send the title under the thumbnail?

website address : rjjabase.com

[Fernando]

Try adding this CSS as well:

@media (max-width: 768px) {
    .blog .inside-article .post-image, .blog .inside-article .post-image img  {
        width: 100%;
    }
    
}

[WOOSUNG]

Thank you. Fernando !

Now that the thumbnail looks small, can I make it full in the background?

[Fernando]

I updated the code here: https://generatepress.com/forums/topic/how-can-i-make-the-thumbnail-not-cut-and-the-title-comes-out-to-the-bottom-2/#post-2500952

Can you update the code you have to this?

[WOOSUNG]

Hello.

I am done already this code. but It is too small in mobile.

How to change full ?

[WOOSUNG]

Thanks for your help.

The thumbnail is too small in the mobile environment.

Is there a css code that can make the thumbnail look full ?

[Fernando]

Can you double-check if you have a syntax error somewhere in Additional CSS?

Copy and test all the code you have there here: https://codebeautify.org/cssvalidate

[WOOSUNG]

Thank u . kindley.

There are no errors in the additional css.

However, 116 errors are seen in the existing css.

If I may
I will let you know the login ID and pw, so could you take a look?

[Fernando]

We can’t take a look at all the errors. It would be best to reach out to a developer regarding this.

With regards to the issue at hand, replace this:

@media (max-width: 768px) {
    .blog .inside-article .post-image {
        width: 100%;
    }
}

with this:

@media (max-width: 768px) {
    .blog .inside-article .post-image, .blog .inside-article .post-image img  {
        width: 100%;
    }
    
}

as mentioned. Let us know how it goes.

[WOOSUNG]

Thanks.

Both codes come out in valid CSS.

It says there’s nothing wrong.

[Fernando]

You still haven’t replaced the code. Please replace it first as mentioned.

[WOOSUNG]

Thank you !!

It’s resolved.

[Fernando]

You’re welcome, Woosung!

[Author]

Posts