[Resolved] How do I make titles closer in archive/blog/categores etc.

[Robin]

How do I decrease the amount of line spacing between titles in categories, archives and blog. At the moment there is too much white space. See https://robinharford.com/category/anthropology/ and https://robinharford.com/

Also is it possible to add a bullet/icon image next to each title?

Thanks in advance…

Robin

[Leo]

Hi there,

Would this apply to all categories/archives/blog pages?

Let me know 🙂

[Robin]

Yes it would Leo.

TIA, Robin

[Leo]

Try this first:

.one-container.blog .inside-article, .one-container.archive .inside-article {
    padding: 0;
}

If you want to remove some more space, then use this:

.one-container.blog .post, .one-container.archive .post {
    margin-bottom: 0.5em;
}

Let me know 🙂

[Robin]

That’s great Leo, it worked, thanks.

One last thing. How can I add a bullet or image/icon next to each title?

[David]

Hi there,

you could use some CSS like this to add ‘something’ before the title:

h2.entry-title:before {
    content: 'x';
    left: -1em;
    position: relative;
    z-index: 1;
}

You can replace the x with a HTML unicode to use one of the built in icons, see here:

https://www.toptal.com/designers/htmlarrows/symbols/

Or any other icon library you may choose to install.

Or instead you can write the property for use with an image: content: url('url-to-my-image');

[Robin]

Bloomin’ marvellous David. That worked great. Thanks to you and Leo. Closing ticket now.

[David]

Awesome – pseudo elements in CSS are really cool. Glad we could be of help.

[Author]

Posts