“recent posts” styling/CSS

  • Resolved Ron Jones

    (@jonesre)


    5 years, 8 months ago

    First: I really appreciate the logical fashion in which you have written the div/class tags. It makes finding the right selector very simple! Thanks very much.

    Configuration: Recent Posts block, list layout, h3 title, thumbnail images, 25-word excerpt, meta (date only), newest first, all categories, 4 items total.
    (easy to configure in Gutenberg).

    Desired outcome: display on the front page of a site, styled neatly with subtle borders around each post.

    Situation: it works as designed, and looks attractive, save for one minor issue.

    The .wp-block-getwid-recent-posts__content-wrapper selector has an odd setting in getwid/assets/css/blocks.style.css that is causing me a problem.
    Beginning at line 11, character 2636, I have the following configuration:
    .wp-block-getwid-recent-posts__post-thumbnail+.wp-block-getwid-recent-posts__content-wrapper{margin-left:5%;margin-top:0;max-width:55%;width:100%}

    My problem: the max-width setting is causing my post excerpt to display within a shorter horizontal space. The visual effect of the “max-width:55%” setting is like I’ve applied 40 px of padding on the right hand side.

    I have not been able to overcome this via the customizer.
    However, using the “inspector” feature of Firefox, I found that by highlighting the ‘content-wrapper’ selector, and un-checking the max-width 55% setting, my problem went away.

    I was able to solve my issue by going in to the blocks.style.css file and commenting out max-width:55%; However, I realize this is probably not ideal.

    1. Is there a simple way to address this in the customizer, so that the max-width setting is overridden?
    2. If not, will it harm any other recent-posts functions if I comment out or delete this particular max-width setting?

    Thanks,
    Ron Jones

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • audunmb

    (@audunmb)

    5 years, 6 months ago

    Was looking for something else and came across your post. Won’t adding
    .wp-block-getwid-recent-posts__post-thumbnail+.wp-block-getwid-recent-posts__content-wrapper{max-width:none;}
    in customiser fix this.

    Thread Starter Ron Jones

    (@jonesre)

    5 years, 6 months ago

    @audunmb
    Thank you for giving your time to my issue. Unfortunately, making the suggested changes in the “additional css” tab of the customizer didn’t seem to make a difference.

    It’s probably something incredibly simple. But there are only so many hours in the day, and such a small issue doesn’t rate too many of them.
    I think I’m going to go ahead and just comment out the 55% max width in the template file. If there are any updates, it will revert, and I’ll have to change it again.

    thank you again!
    Ron

    Plugin Support dimned

    (@dimned)

    5 years, 6 months ago

    Hi Ron @jonesre,
    Thanks for your question. Actually you may add your custom class to Recent Post block via Advanced>Additional CSS class(es) e.g. custom-max-width Then add this class to CSS in order to override the style via customizer:

    .custom-max-width.has-layout-list .wp-block-getwid-recent-posts__post .wp-block-getwid-recent-posts__post-thumbnail + .wp-block-getwid-recent-posts__content-wrapper{
    ….
    }

    However, I’d recommend using the Custom Post Type block because it allows adding a custom post template. Thus you may compose the layout of the post in a query just as you wish.

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

The topic ‘“recent posts” styling/CSS’ is closed to new replies.