[Resolved] Categories and Tags on Same Line?

[Carol]

In this theme, is it possible to make categories and tags pupulate on the same line?

Obviously, the more the categories, there’s a possibility the tags will be pushed to the second line.

But by default, can we style it this way?

Currently using this code:

.cat-links:before {
content: “Filed Under: “;
width: auto;
font-family: “Lato”, sans-serif;
}
.tags-links:before {
content: “Tagged With: “;
width: auto;
font-family: “Lato”, sans-serif;
}

If not, no worries. Just trying to maximize my “no scrolling needed” real estate. 🙂

Thank you!

X80Ws+031v45

[Leo]

Hi there,

Try this CSS;

.cat-links, .tags-links {
    display: inline-block;
}

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

Let me know if this helps 🙂

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

[Carol]

Thank you, Leo! That worked. 🙂

Is there any way to tweak it with a few more pixels separation between categories and tags.

And then just the results links bolded?

Thank you very much.

[Leo]

Try adding this:

.tags-links {
    padding-left: 10px;
}
.tags-links a, .cat-links a {
    font-weight: 600;
}

I also noticed that most of your code is wrapped in @media (min-width: 769px) { which makes them desktop only and I don’t think that’s intended.

I believe you need to replace:

@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		max-width: 405px;
	}

with this:

@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		max-width: 405px;
	}
}

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

[Carol]

Perfect on the tags/categories. Thank you so much!

That extra bracket in the replacement code you gave threw an error so I put it back to the original code without that extra bracket. What indicates that it’s desktop only? I can only see the single ending bracket as the difference in the code.

You’re very helpful, and I appreciate it. 🙂

[Leo]

That bracket definitely needs to be there.

Otherwise you’d see this on mobile:
https://www.screencast.com/t/a2w3CeJ7dx

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

[Carol]

Okay — so should I check the box and try to save?

Thank you.

[Leo]

Yes 🙂

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

[Carol]

Okay, I did.

Thank you very much!

🙂

[Leo]

No problem 🙂

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

[Author]

Posts