[Support request] page hero and load more article problems

[Fernando]

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

[francesco]

Forgive me Fernando but I did not understand what I should do.

[francesco]

I think I did as you suggested but nothing has changed.

[Fernando]

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.

[Fernando]

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

[francesco]

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.

[Fernando]

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

[francesco]

Unfortunately it doesn’t seem to work. I will provide you with access data if it is easier for you.

[David]

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

[francesco]

Hi david, i did as you told me but unfortunately it doesn’t work.

[David]

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.

[francesco]

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?

[Fernando]

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.

[francesco]

Thanks fernando, I will proceed as you say.

[Fernando]

Alright! You’re welcome Francesco!

[Author]

Posts