Archived topic
page hero and load more article problems
51 replies · Started by francesco on October 12, 2022
I see. Remove that Bottom border you added, and add add-underline-hover to the class list of the Headline Block. Then add this CSS in Appearance > Customize > Additional CSS:
.gb-headline.add-underline-hover:hover {
border-bottom: solid 2px #0000ff;
}
Forgive me Fernando but I did not understand what I should do.

I think I did as you suggested but nothing has changed.
I see. I'll add some screenshots.
1. Remove the Border size value you added for the Headline Block. Ex: https://share.getcloudapp.com/jkuWpkN8
2. Add add-underline-hover to the class list of the Headline Block. Ex: https://share.getcloudapp.com/lludWlLY
3. Add the CSS code above through Appearance > Customize > Additional CSS.
I see. It's not working because, the Container holding the Headline is a link.
Try changing the code to this:
.gb-container:hover .add-underline-hover {
border-bottom: solid 2px red;
}
1) honestly I don't see any edges that need to be removed.
2) now it seems to work but I would like the line to cover only the text it occupies.
3) the CSS seems to stretch the image I think.
Can you add add-underline-hover-container to the class list of the Container Block which is the link. Then, change the code to this:
.gb-container.add-underline-hover-container:hover .add-underline-hover {
border-bottom: solid 2px red;
}
Unfortunately it doesn't seem to work. I will provide you with access data if it is easier for you.
Remove you current CSS.
And apply the method i provided here:
https://generatepress.com/forums/topic/page-hero-and-load-more-article-problems/#post-2378564
With that headline block selected - go to Advanced > Additional CSS Class(es) and add: border-hover
Then add this CSS:
.border-hover:not(:hover) {
border-color: transparent !importnat;
}
Hi david, i did as you told me but unfortunately it doesn't work.
Aah you have a container link.
Change the CSS to:
.border-hover:not(:hover) h2 {
border-color: transparent !important;
}
And move the border-hover class to the GB Container Block that has the container link.
Very thanks david, now it seems to work fine, although I would like the hover to activate when I over the title and not when I hover over the image. in fact now I find myself having another problem, the category is not selectable despite the fact that I made it dynamic, I open the post and I do not enter into the category. how can i give importance to title, category, author despite the image with link?
It's not possible. In web development - HTML - having nested links or links on top of one another doesn't work.
Since the Category/Author is inside the Container Link, the Category/Author Links wont work. You'll need to restructure your design placing the Category/Author links outside of the Container Link.
The same concept applies for the Title + underline on hover.
Thanks fernando, I will proceed as you say.
Alright! You're welcome Francesco!