Home › Forums › Support › How can I make the thumbnail not cut, and the title comes out to the bottom?
- This topic has 14 replies, 2 voices, and was last updated 3 years, 3 months ago by
Fernando.
-
AuthorPosts
-
January 18, 2023 at 5:25 pm #2500858
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/
January 18, 2023 at 8:30 pm #2500943Fernando Customer Support
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?
January 18, 2023 at 8:43 pm #2500950WOOSUNG
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
January 18, 2023 at 8:47 pm #2500952Fernando Customer Support
Try adding this CSS as well:
@media (max-width: 768px) { .blog .inside-article .post-image, .blog .inside-article .post-image img { width: 100%; } }January 18, 2023 at 8:51 pm #2500955WOOSUNG
Thank you. Fernando !
Now that the thumbnail looks small, can I make it full in the background?
January 18, 2023 at 8:57 pm #2500963Fernando Customer Support
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?
January 18, 2023 at 9:06 pm #2500972WOOSUNG
Hello.
I am done already this code. but It is too small in mobile.
How to change full ?
January 18, 2023 at 9:35 pm #2500993WOOSUNG
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 ?
January 18, 2023 at 10:30 pm #2501025Fernando Customer Support
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
January 18, 2023 at 11:28 pm #2501066WOOSUNG
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?January 18, 2023 at 11:33 pm #2501071Fernando Customer Support
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.
January 18, 2023 at 11:48 pm #2501083WOOSUNG
Thanks.
Both codes come out in valid CSS.
It says there’s nothing wrong.
January 18, 2023 at 11:51 pm #2501089Fernando Customer Support
You still haven’t replaced the code. Please replace it first as mentioned.
January 19, 2023 at 12:00 am #2501094WOOSUNG
Thank you !!
It’s resolved.
January 19, 2023 at 12:03 am #2501096Fernando Customer Support
You’re welcome, Woosung!
-
AuthorPosts
- You must be logged in to reply to this topic.