How to reduce vertical space between posts

  • Resolved lklawless

    (@lklawless)


    2 months, 2 weeks ago

    I’ve tried the shortcode both within the post text and in the footer, and there is just way too much vertical space between the posts, and even between the title and the first post. I’ve gone over and over the settings but can’t figure out how to reduce this gap. I’ve tried the default height and, currently, 1ps height, but it’s the same thing. Help?

    [latest-selected-content ver="2" limit="4" display="title,excerpt" titletag="h4" url="yes" elements="26" default_height="1px" tablet_height="1px" mobile_height="1px" type="post" status="publish" orderby="dateD"]

    View post on imgur.com

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hi,

    You can test with changing a bit the padding and gap overrides:

    [latest-selected-content ver="2" limit="4" display="title,excerpt" titletag="h4" url="yes" elements="26" default_height="auto" default_padding="0.25rem" default_gap="0.25rem" tablet_height="auto" tablet_padding="0.25rem" tablet_gap="0.25rem" mobile_height="auto" mobile_padding="0.25rem" mobile_gap="0.25rem" css="content-center" type="post" status="publish" orderby="dateD"]

    Then you could also check for the section id and do something like this in your CSS (your section id is probably going to be something else):

    #lps-2d288f37f450b121d4bcbd0f6e85e10e {grid-auto-rows: auto;}

    If this is not enough, we could take a look at the styles for the h4 in your theme, to see if the global styles are applying some top margin to all, and maybe override it for the cards.
    Let me know how it goes.

    Regards,
    Iulia

    Thread Starter lklawless

    (@lklawless)

    Hi Iulia,

    Thank you for responding.

    The new code you suggested reduced the space only by a tiny amount.

    The section id change custom_html-7{grid-auto-rows: auto;} didn’t do anything at all.

    I’m not great with css, but this is what I found: in custom css, I have

    h1, h2, h3, h4, h5 {
    line-height: 1em !important;
    }

    And in style.css, I have

    h1, h2, h3, h4, h5, h6 {
    color: #3c312e;
    font-family: Raleway, Arial, Helvetica, sans-serif;
    padding-bottom: 5px;
    line-height: 1em;
    }

    Current shortcode:

    [latest-selected-content ver="2" limit="4" display="title,excerpt" titletag="h4" url="yes" linktext="?Vamos!" elements="26" default_height="auto" default_padding="0.25rem" default_gap="0.25rem" tablet_height="auto" tablet_padding="0.25rem" tablet_gap="0.25rem" mobile_height="auto" mobile_padding="0.25rem" mobile_gap="0.25rem" css="two-columns as-column content-center" type="post" status="publish" orderby="dateD"]

    Plugin Author Iulia Cazan

    (@iulia-cazan)

    Hi,

    Looking at the markup I saw that the margin is added to the hentry, maybe you could try this instead:

    #custom_html-7 .latest-post-selection.two-columns {
        grid-auto-rows: auto !important;
    }

    #custom_html-7 .hentry {
        margin-top: 0 !important;
    }

    Let’s see if this helps.

    Regards,
    Iulia

    Thread Starter lklawless

    (@lklawless)

    That did it. Thank you so much!

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