Overlay styled title for Style for blogpost thumbnails?

Hi there,

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

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.

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.

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

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?

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

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

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?

Sorry for the late reply.

I used this Element.

For the breadcrumbs, can you try using generate_inside_site_container instead?

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.

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

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.

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

Let us know how it goes.