Style for blogpost feature image on post thumbnails?

How can I get the same layout for the title of my blog posts, that is:

  • the title displayed on the image thumbnail,
  • on a transparent dark background ribbon?

Hi Des,

The structure seems like a simple version of the one created here: GeneratePress - Block Element Content Template Demo - YouTube

For the title, you just need to add a Background color to the Headline Block. Make sure to lessen the opacity to make it a bit transparent.

Hi Fernando,

Your video tuto has been extremely helpful but this is what I have been able to do with it:

Please compare with the default layout of another theme:

1 - I was not able to find a way to make sure that the height is the same for all images
image

2 - I am not sure how to get my text white. It displays white in the Edit mode but not on the published page:

3 - I don’t understand how the alignment works for the Heading.

As you can see, the alignment is set to right:

But on the actual published page, the Title gets centered.

Here is the link to the page.

I see. Instead of giving the Container Block bottom padding, can you try adding min-height? Otherwise, if this doesn’t work, we can provide custom CSS. Let us know how it goes.

Through a trial and error process, I put 100 for Minimal hegiht and 300 for magin-bottom:

And I get this on my PC:

But look at the result on a smartphone:

How do I get the feature images displayed fully like on the PC, whatever the resolution of the screen is, be it on a smartphone or an ipad?

You’ll need to container the Background image for it to show fully. To do so, try adding this CSS:

@media (max-width: 768px) {
    .archive .dynamic-content-template > .gb-container.gb-has-dynamic-bg {
        background-size: contain;
    }
}

However, the images’ dimensions will make their height smaller. Thus, you’ll need to alter the padding/min-height on mobile.

After adding your suggested snippet to the CSS, I cannot see any change:

Here is the page link if you want to see what is wrong.

Viewing your site from my end, it seems to be working: Archives des Marketing - me...

Can you try clearing all caching mechanisms you have for your site?

I now have the same view as yours.

  1. How do I remove the extra white space between each “post”?

  2. How do I have this layout on smartphone…

image

… just like for the PC version and as opposed to the current smartphone view:

image

Your image’s aspect ratio gives a relatively small height. Try decreasing the Top or Bottom padding you’ve added on mobile view only. Example: Edit Page “Home” ‹ fazarcon...

I tried doing what you said:

The image still does not look like this on my smartphone:
image

How can I adjust the title and transparent background to be like on the image above?

Thank you

I see. The Aspect Ratio of your image generates a small height on mobile. Can you restructure it to this instead: How tell a Block to keep an...

We’ll address the issues through CSS instead.

Well, I’m confused and afraid to break all I have succeeded doing.

Could you please share instructions so that I understand what you want me to test, without breaking what we have already done?

Thank you

Also, if you look on your smartphone , and have a look at the page , why do they have a different behavior?

How to fix the Marketing category page so that it looks like the Thrillers category page?

Mine is an iphone and I confirm I cleared my cache before taking the screenshot above.

Hello,
Can anyone please advise?
Thank you

Can you reach out to us here regarding this?: https://generatepress.com/support