[Support request] Entry title fit with thumbnail (overlay title on features images)

[Vuong]

Hello guys,i want to make entry title overlay on post thumbnail,like this screenshot ( i did it on my old theme)

but when i do,its not fit with my post thumbnail

and here my css on my old theme

.entry-title {
    line-height: 1;
    position: absolute;
    padding: 10px;
    background: url(https://asdmovies.com/wp-content/themes/frontier/images/title-bg.png) top repeat-x;
    z-index: 5;
    bottom: 0;
    width: 100%;
    text-align: center;
}

So what should i do,pls help..thanks very much !

[David]

Hi there,

can you provide a link to your new site so i can provide the CSS if it is possible.

[Vuong]

im still testing on localhost,but here my site using old theme : https://asdmovies.com
on my old theme ( frontier ) they put post-image div to content.php so i can easily add any div to this ( see this ss below )
https://i.imgur.com/EaTk6D5.jpg
in this screenshot,i can just add “quality” div and put entry-title inside entry-thumbnail so they can display without problem
but on Generatepress,i can’t find any post-thumbnail div in content.php (ss below)
https://i.imgur.com/mH6tmo3.jpg
hope you get what i said,im not really good in english.

[David]

So I would do the following:

1. Customizer > Layout > Blog –> Featured Images Archive – sets its position above title.
2. Create a New Hook Element:

Hook Content:
<div class="post-wrap"><!-- Open Post wrap -->
Make sure to remove the closing </div> the editor will add.
Select the before_content hook
Set the Display Rules to Blog & All Archives

3. Create another new Hook Element:

Hook Content:
</div>
Select the before after_entry_title hook
Set the the Priority to 5
Set the Display Rules to Blog & All Archives

We should now have the post-imageand the entry-header within our div wrap.

So this CSS will help for the overlay:

.post-wrap {
	position: relative;
}
.post-wrap .post-image {
	margin-bottom: 0 !important;
}
.post-wrap .post-image img {
	vertical-align: middle;
}
.post-wrap .entry-header {
	position: absolute;
	bottom: 10px;
	left: 10px;
}

In the last CSS RULE adjust the bottom, left properties to suit.

[Vuong]

Tks David,its working well on pc now,but in tablet and mobile mode,its not..”quality” and title not display correctly
https://i.imgur.com/kVJ9OBI.jpg
https://i.imgur.com/OrZddw1.jpg
i uploaded new theme to my site,you can check it : https://asdmovies.com
Do you need admin / password to check it easy ?

[Vuong]

And another problem,tag clod widget not display full,here screenshot

[Vuong]

Tested on iphone :

[David]

I really need to see a link to the site to tell what the issue is. Are you able to push it to a live domain so i can see?

[Vuong]

Yes,here my site now : https://asdmovies.com
and btw,how can i display post grid on mobile too ?.tks

[David]

You can try forcing the image to fill the column by changing this CSS:

.post-wrap .post-image img {
	vertical-align: middle;
}

to:

.post-wrap .post-image img {
    vertical-align: middle;
    width: 100%;
}

[Vuong]

Tks David,i get it,could you help me solve my sidebar widget problem ? you can check it on my site (genre widget and year widget )
Sorry for disturb.

[Tom]

Hi there,

It looks like you’re just using regular links now?

Let me know 🙂

[Author]

Posts