Overlay styled title for Style for blogpost thumbnails?

This topic has 16 replies, 4 voices, and was last updated 3 years, 4 months ago by Fernando.

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

Author

Posts
December 3, 2022 at 7:00 am #2447869

Nicolas

Hello,

Can you please help me with this:
https://community.generateblocks.com/t/style-for-blogpost-feature-image-on-post-thumbnails/1029/14

Thank you

December 4, 2022 at 5:29 am #2448936

David
Staff
Customer Support

Hi there,

what is the issue ? You want the marketting page to match the thrillers – where can i see the marketing page issue ?

December 4, 2022 at 6:05 am #2448964

Nicolas

Hi David,

The issue is when you look on a smartphone.

It looks like this:
https://snipboard.io/KeAOjF.jpg

I want it too look like this:
https://snipboard.io/mY1goF.jpg

I’m talking about the way the title and its overlay transparent rectanagle is displayed. It goes out of the feature image on smartphone.
Here is the page link.

December 4, 2022 at 6:59 pm #2449627
Fernando
Customer Support
Hi Nicolas,

Thank you for reaching out to us here. Can you try adding this CSS through Appearance > Customize > Additional CSS:
```
@media (max-width: 768px) {
    .archive .generate-columns-container article > .gb-container > .gb-inside-container {
        padding-bottom: 0;
        aspect-ratio: 3/2;
    }
}
```
This sets the aspect ratio of the container to correspond to that of that image’s.

Let us know how it goes.
December 5, 2022 at 9:59 am #2450596

Nicolas

Hello Fernando,

I let you know: It does not work for the Marketing category page I shared the URL earlier in the Private Info field.
Not sure why. You can check on your smartphone. I confirm I cleared my cache before testing.

Thanks

December 5, 2022 at 1:01 pm #2450768

Ying
Staff
Customer Support

Hi Nicolas,

This is what I see on my phone, it looks normal to me:
https://www.screencast.com/t/KiDHgZVfeNJ

Have you tried it on other devices?

December 5, 2022 at 1:56 pm #2450822

Nicolas

Hi Ying,

I had to reboot the iphone twice and cleared the cache 3 times to get the same.
I’m using an iphone XR and Safari.

Now, how can I get it look good on the Blog page:
https://snipboard.io/cL7paj.jpg

See how the layout is broken because of the breadcrumbs and the 2 column of posts not aligned when comparing them to the other Category/Archives pages such as the Marketing one?

Thanks

December 5, 2022 at 3:53 pm #2450898

Nicolas

Let me add one more question on top of my previous message.

How can I get my feature images being displays in full on the thumbnails?

As you can see on the screenshot when comparing the thumbnail and the real feature image in the related posts, the images on the thumbnails are cropped and not displayed 100%?

Thank you

December 5, 2022 at 5:32 pm #2450974

Fernando
Customer Support

Let’s tackle the breadcrumbs issue first then proceed with the other issues afterward.

May we know how you added the breadcrumbs specifically? Does this “breadcrumbs” feature have a shortcode?

December 10, 2022 at 2:37 am #2456778

Nicolas

Sorry for the late reply.

I used this Element.

December 11, 2022 at 3:05 pm #2458255

Ying
Staff
Customer Support

For the breadcrumbs, can you try using generate_inside_site_container instead?

December 12, 2022 at 10:40 am #2459441

Nicolas

Hello,

Thank you Ying, but I’m not sure why Fernando and you are focusing on the breadcrumbs.
I have a feeling your latest two replies are pushing me away from my initial need and request.

Still, I tried doing what you suggested and used generate_inside_site_container. Here is how it looks.
Or also like this if you click the first post.

So I put it back to so that it looks as it was before:
https://snipboard.io/LimT0y.jpg
https://snipboard.io/tHYygK.jpg

So can someone from the support team please help me solve my initial issue as described above?
Please my message #2450898 from December 5, 2022 at 3:53 pm.

Thank you for your help.

December 12, 2022 at 7:02 pm #2459776
Fernando
Customer Support
Sorry, we try to address one issue at a time, and previously, this issue you shared was most apparent: https://snipboard.io/cL7paj.jpg

Moving forward, let’s discuss the Background image size now. Can you first set the size of the Background image to contain? Example: https://share.getcloudapp.com/z8ul8zQb

Then, try adding this through Appearance > Customize > Additional CSS:
```
body:is(.archive,.blog) article.dynamic-content-template > .gb-container {
    aspect-ratio: 3/2;
}
```
December 13, 2022 at 2:54 pm #2460968

Nicolas

Hello,

First, I want you to be sure about one thing: GeneratePress support team is top-notch. Ying has been instrumental in the past months while helping me do things with GP and fix some issues. Leo, David and you too. Thanks to you all!

But I have spent so much time trying to set my site that I admit I have fears about moving backward. I’m not a developer and I want to be able to focus on content creation as soon as possible. Now you hopefully understand where I’m coming from. You guys rock!

Moving forward, let’s discuss the Background image size now. Can you first set the size of the Background image to contain? Example: https://share.getcloudapp.com/z8ul8zQb
This seems to have fixed my feature image issue. They are now displayed 100% of their size on the thumbnails of the Archive pages. Thanks a bunch.

Still, the title was going a bit outside of the feature image. But I added the code snippet you provided to my CSS and it seems to have fixed the issue too. Great!

Only the blog section still have some inconsistencies. Please have look:
https://snipboard.io/rF5ACM.jpg
Can you please check it on both PC and smartphone. You’ll see what I mean.

Thank you.

December 13, 2022 at 6:55 pm #2461080

Fernando
Customer Support

I see. I updated the code above. Can you try that instead?

Let us know how it goes.
Author

Posts