Insert space between thumbnails in sidebar widget

  • Resolved gatehealing

    (@gatehealing)


    7 years, 7 months ago

    I love this plugin. Searching for ‘space between thumbnails’ yielded no results.

    If you look at the page I have referenced (for example) you see that i have included thumbnails . . . they all run together though. I’d like to either add a gray separator line, or a white space between each post.

    I am using a Custom HTML widget in my Sidebar Blog area. Enfold theme. THeme and WordPress versions are latest.

    Thanks,
    Jon

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor zymeth25

    (@zymeth25)

    7 years, 7 months ago

    This can be done in CSS. For example:

    lcp_thumbnail {
    margin-bottom: 10px;
}
    Thread Starter gatehealing

    (@gatehealing)

    7 years, 7 months ago

    Thanks @zymeth25,

    I put that in my child theme’s style.css, cleared my super cache, and browswer caches/history and it didn’t work.

    Is there a different CSS I should be trying to put it into?

    Thanks,
    Jon

    EDIT: If you navigate to https://gatehealing.com/category/miscellaneous/ you will notice that some of the titles are long enough that they wrap to the next line, which is fine, but I’d prefer for them to stay next to the image rather than the first line going above the image. Let me know if you need a screenshot. . .I think I can do something with google drive to create a link to one.

    Thread Starter gatehealing

    (@gatehealing)

    7 years, 7 months ago

    In case it’s helpful, here’s what is in my child theme’s style.css right now:
    .lcp_thumbnail{
    float: left;
    }
    .lcp_catlist li{
    clear: both;
    }
    lcp_thumbnail {
    margin-bottom: 10px;
    }

    Plugin Contributor zymeth25

    (@zymeth25)

    7 years, 7 months ago

    Ah, sorry I missed a dot, that’s why it’s not working. Anyway, just add margin-bottom: 10px; just below float: left; and delete what I told you to add in my first response.

    Thread Starter gatehealing

    (@gatehealing)

    7 years, 7 months ago

    @zymeth25

    Thanks, that worked great.

    Any suggestion about how to stop the lines from wrapping on top of the thumbnails vs staying next to them?
    https://gatehealing.com/category/miscellaneous/

    Plugin Contributor zymeth25

    (@zymeth25)

    7 years, 7 months ago

    It’s better to do this in a custom template, but you could try it with CSS. First add title_class="lcp_title" to your shortcode, then delete your custom CSS and add this instead:

    .lcp_catlist li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.lcp_catlist li a:last-of-type {
    flex-shrink: 0;
}

.lcp_title {
    order: 2;
}
    • This reply was modified 7 years, 7 months ago by zymeth25.
    Thread Starter gatehealing

    (@gatehealing)

    7 years, 7 months ago

    PERFECT!!! Thanks zymth25. I’ll go research the custom template thing and figure that out. If I cannot figure it out, I’ll start a new thread with Custom Template in the title.

    Marking this one as resolved. Thanks a bunch.
    Jon

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

The topic ‘Insert space between thumbnails in sidebar widget’ is closed to new replies.