[Resolved] Border after hook

[Jesus Higuerey]

Hi,

I’ve added a button on a hook. Specifically on the front page.The thing is, I want to add sort of a divider between that button and the next post.

I’ve added the following code:

.inside-article{
	border-bottom: 1px solid #e3e3e3;
}

But it just looks like this: http://prntscr.com/kils45

How can I make it so it doesn’t overlap the button?

GeneratePress 2.1.3

[Leo]

Hi there,

Looks like you’ve fixed this?

I’m not seeing the overlapping:
https://www.screencast.com/t/sneJ4kcFfRh

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

Sort of but I want it underneath the hook

[Leo]

I’m a bit confused. So you want it to be underneath the comment button?

If so why not just add the bottom after that?

Let me know if I’m missing something.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

The button is a hook and the “line or separator” is css. And yes I want it underneath the button

[Leo]

What if you do something like this in hooks:

<div class="button-section">
    button here
</div>

With this some CSS:

.button-section {
    border-bottom: 1px solid #000;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

It kinda looks the same, but now the line is shorter.

[Leo]

Are you able to show me the look you are going for?

Your comment button is using background image which is making it difficult.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

http://prntscr.com/kjfu2g

[Leo]

Which hook are you using?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

after_content

[Leo]

Maybe try this for your overall CSS:

.inside-article {
    border-bottom: 1px solid #000;
}
.button-section {
    height: 40px;
}

Not sure where you got the button code from but ideally it should has a height property on it so we don’t have to set it. Currently it’s using background image so the height is basically 0.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jesus Higuerey]

That kinda works thanks.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts