[Resolved] Categories and Tags on Same Line?

Home Forums Support Categories and Tags on Same Line?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1027509
    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

    #1027756
    Leo
    Staff
    Customer Support

    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 🙂

    #1027779
    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.

    #1027843
    Leo
    Staff
    Customer Support

    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;
    	}
    }
    #1027880
    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. 🙂

    #1027883
    Leo
    Staff
    Customer Support

    That bracket definitely needs to be there.

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

    #1027925
    Carol

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

    Thank you.

    #1027939
    Leo
    Staff
    Customer Support
    #1027945
    Carol

    Okay, I did.

    Thank you very much!

    🙂

    #1028570
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.