Support » Plugin: List category posts » Image and text run into next column

  • Resolved rogbiz

    (@rogbiz)


    Firstly, I think List Category Posts is a terrific plugin – many thanks for it!

    However, I can’t get the CSS right for the home page of http://www.rmrg.org.uk – it’s fine on phone or PC, but on tablet the image and text extend outside the column. Can anyone advise what CSS I need to stop this happening?

    Here’s the shortcode and the relevant CSS.

    [catlist name=activities numberposts=1 excerpt=full excerpt_tag=p excerpt_class=lcp_excerpt_side thumbnail=yes thumbnail_class=lcp_thumbnail_side thumbnail_size=270,200 title_tag=h4 title_class=lcp_title_side ]

    /* Formatting for List Category Post calls (home page): */

    .entry-content ul.lcp_catlist {
    list-style-type: none;
    clear: both;
    overflow: auto;
    padding-left: 160px;
    padding-top: 20px;
    margin-bottom: 10px;
    display: inline-table;
    position: relative;
    bottom: 22px;
    }

    .entry-content h4.lcp_title_side {
    line-height: normal;
    margin: 0;
    padding: 210px 0 10px 0;
    width: 280px;
    font-size: 14px;
    color: white;
    position: relative;
    left: -165px;
    top: 0px;
    }

    .entry-content h4.lcp_title_side a {
    color: white;
    text-decoration: underline;}

    .entry-content h4.lcp_title_side a:hover {
    color: #003310 !important;
    background-color: #fffdf4;
    text-decoration: underline;
    }
    .entry-content p.lcp_excerpt_side {
    margin: 0;
    padding: 0;
    width:100%;
    font-size: 13px;
    line-height: normal;
    color: white;
    position: relative;
    left: -165px;
    top: 0px;
    }

    .entry-content a.lcp_posts_morelink_side {
    display: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    color: white;
    font-size: 90%;
    position: relative;
    left: -100px;
    }

    .entry-content .lcp_thumbnail_side {
    float: left;
    border: none;
    padding: 0 0 0 0;
    margin: 0 0 40px 0;
    position: absolute;
    left: -148px;
    top: 20px;
    }

    .entry-content span.lcp_excerpt_side {
    display: blockquote;
    }

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

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

    (@zymeth25)

    Just had a glance and I think it can be done much easier and better without positions relative and absolute. Try flexbox.

    Thread Starter rogbiz

    (@rogbiz)

    I can’t get a sensible display without using position statements.

    As for flexbox, I can’t find a way that works to apply the relevant order etc statements to the parts of LCP – Title, Thumbnail and Excerpt.

    It’s beyond me I’m afraid – any help would be very welcome!

    Plugin Contributor zymeth25

    (@zymeth25)

    Aha, right, now I see you are changing the order of elements with CSS. Flexbox can achieve that better that positions but it still would be pretty clumsy and reordering elements with CSS is not recommended anyway.

    In your case the best solution is using a custom template. You can reorder the elements however you like in the template and then apply simple CSS to style everything.

    • This reply was modified 4 months ago by zymeth25.
    Thread Starter rogbiz

    (@rogbiz)

    Thanks zymeth25, I’ll take a look at a template. I don’t think the order of elements makes much difference, I’ve tried with the natural order and still can’t get it to work any better – I can’t help feeling there is some CSS that would make it work, but I can’t find it. Anyway, onward and upward!

    Plugin Contributor zymeth25

    (@zymeth25)

    If you use normal order you can have a look at the pictures on your site that are not generated by the LCP plugin and just copy their CSS. The essential bit of CSS that you have to apply in order to prevent overflowing is max-width: 100%; but it won’t work if you use positioning like you showed above.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.