Sidebar alignment issues

  • Hi,

    I’m having some problems with my sidebar. I’ve started using the Category Posts-Widget: https://www.ads-software.com/support/plugin/category-posts/, but as you can see, it is not aligned the way it is supposed to bet?

    Now, I’m very much a beginner when it comes to coding, so I would gladly appreciate any help on this issue. Am I supposed to create “divs” for in the sidebar so that is can have a fixed height for each post?

    The URL is https://www.xn--ntcasinon-v2a.se/, and you could see the issue in the sidebar called “Topp 10 casinon”. The problem is that if I use an excerpt that is not long enough to cover two text rows, the next item in the list will be pushed up to the right and it looks all wierd.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can sort this out using CSS.

    If you’re using a custom theme, edit your style.css file and add this in the bottom;

    .cat-post-item {
 clear: both;
}

    Here’s some information about what clear: both; does,
    https://www.w3schools.com/cssref/pr_class_clear.asp .

    If you’re not using a custom theme, use a Child Theme or a custom style/css plugin.

    Thread Starter frajdel

    (@frajdel)

    Thank you, that sorted it! However, there’s one more little problem, still linked to the length of the excerpt used in the post. If you check the sidebar now, there is a 2 px gap between every thumbnail that has two rows of excerpt, apart from the second thumbnail (which only has one row of text) which is positioned right under the first, without a gap in between.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s because the padding bottom (10px) which is causing the gap, is only applying to the paragraph text within each thumbnail item. So the first thumbnail has less text, therefore the padding isn’t going to work the same as the others.

    You ought to remove this padding from the paragraph, then apply it each <li> list item and give the list item a height.

    E.g

    .widgetcontent p {
 padding: 0;
}

.widgetcontent li {
 height: 70px;
 padding-bottom: 10px;
}

    Thread Starter frajdel

    (@frajdel)

    Thank you so much, that solved it!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sidebar alignment issues’ is closed to new replies.