Change Tag / Social Media Line Position

  • Resolved rodario

    (@rodario)


    3 years, 1 month ago

    Hello

    This question pertains to all posts, but it is visible on desktop on the linked post, for example.

    I often use a three column format for my posts, with the main content in the middle column. The left (and right) column often ends much sooner than the middle column.

    Tags, (generated by wordpress / the theme) and social media icons (generated by a plugin), as well as presumably any “attach to end of post” content I may or may not add in the future start at the left end of the container.

    This makes sense, but looks bad.

    Is there a way to make these lines align with the middle column?

    Thanks in advance and have a great day ??

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @rodario!

    It’s possible to align separately every element (tags, social media icons and post navigation links) with custom CSS, as they are not included together in a block so they can’t be moved together. This means that it’s not possible to provide code to align elements that you may add in the future (because it depends on the element), but only for the ones that are currently on the site. You could try to add the code below in the Additional CSS section within the Customizer.

    @media(min-width: 1200px){
.single-post .spbsm-sharebuttons-output-wrapper, .single-post .spbsm-followbuttons-output-wrapper, .single-post .nv-tags-list, .single-post .nv-post-navigation {
    max-width: 60% !important;
    text-align: center !important;
    margin-left: 22% !important;
}
}

    Have a good day!

    Thread Starter rodario

    (@rodario)

    Hi @luciamarinescu

    Thanks, that almost does it.

    Now I’d just need a way to make it specific to a post category, or better yet, to posts that use a three column layout. Because with two columns this new centered layout looks strange.

    Also, with the post navigation, for some reason “previous” is centered, and “next” is right alinged. Ideally “previous” would be left aligned.

    And the lines above the social media things are still left aligned, but that’s minor.

    And finally, do you have a tip on how to find the names of these elements? Because I feel like I could write or adapt some simple CSS too, but I can’t figure out how to get element names like “.nv-tags-list”. When I use the inspector in the browser I get wildly different names.

    Have a good day too ??

    • This reply was modified 3 years, 1 month ago by rodario.

    Hello @rodario!

    Unfortunately it’s not possible to apply this style only for posts that have a three column layout or for posts from certain categories using custom CSS.

    Regarding the placement of “Previous” in the post navigation section, it can be aligned to the left using the code below.

    .single-post .previous {
    text-align: left !important;
}

    You can find the CSS classes that have to be used to change the style of the elements using the Inspector. It’s possible to right-click on the specific element that you would like to style, click on Inspect and find that element’s specific class, as you can see in this example.

    Have a good day!

    Thread Starter rodario

    (@rodario)

    Hi @luciamarinescu

    That worked, thanks ??

    And I’ll have to try again because I couldn’t find these identifiers in the inspector.

    • This reply was modified 3 years ago by rodario.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Change Tag / Social Media Line Position’ is closed to new replies.