Need To Reduce White Space Between Elements of Different Sizes

Home › Forums › Jevelin Theme › Need To Reduce White Space Between Elements of Different Sizes

Home › Forums › Jevelin Theme › Need To Reduce White Space Between Elements of Different Sizes

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts

  • LeaV
    Participant

    Hi,

     

    I have placed 2 quarter elements below a half element to “split up” the list of features into two columns. However, when I do this it creates a very large gap between the 2 quarter elements and the half element above it.

     

    Is there some custom CSS code I can use to reduce this?

     

    Thanks

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @LeaV,

     

    I hope you are well today and thank you for your question.

     

    You can reduce it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (min-width: 1251px) {
.sh-section-e6a2a30d24158618572e19cc8dc77ac9 .fw-row:nth-child(2) .sh-column:first-child {
    position: absolute;
    top: -91px;
    left: 0;
}

.sh-section-e6a2a30d24158618572e19cc8dc77ac9 .fw-row:nth-child(2) .sh-column:last-child {
    position: absolute;
    top: -91px;
    left: 200px;
}

}

     

    Best regards,
    Shufflehound team

    LeaV
    Participant

    Hi,

     

    Thanks for this, but I’ve added the code and there’s still no change. I’ve added other Quick CSS code which has taken immediate effect so I don’t think it’s a matter of waiting a bit.

    Shufflehound Support
    Moderator

    Solution for this topic

    It seems the section id is getting changed on your site so above shared CSS code is not working.

    Please try using below custom CSS code instead of above.

     

    @media (min-width: 1251px) {
#content .fw-page-builder-content > .sh-section:first-child .fw-row:nth-child(2) .sh-column:first-child {
    position: absolute;
    top: -91px;
    left: 0;
}

#content .fw-page-builder-content > .sh-section:first-child .fw-row:nth-child(2) .sh-column:last-child {
    position: absolute;
    top: -91px;
    left: 300px;
}
}

    LeaV
    Participant

    Much better, except one of the list points isn’t appearing on it’s own line – it starts immediately after the previous one. I’ve noticed this tends to happen a lot with list points on other pages, too.

     

    There’s also another page I want to do something similar with – I’ve placed the link in the private section below.

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Solution for this topic

    Much better, except one of the list points isn’t appearing on it’s own line – it starts immediately after the previous one. I’ve noticed this tends to happen a lot with list points on other pages, too.

    Use below custom CSS code to resolve this issue.

     

    li.sh-list-item {
    display: inline-flex;
    width: 100%;
}

     

    There’s also another page I want to do something similar with – I’ve placed the link in the private section below.

     

    Actually to do it correctly, you should move the list item contents in to the column above it as shown in the attached screenshot.

    Attachments:
    You must be logged in to view attached files.

    LeaV
    Participant

    Hi – thanks. For the second issue, I presume that would then turn it into a single column list. I was hoping for two columns. I presume there’s now to place two 1/3 elements into one 2/3 element? If not it’s okay, I’ll figure something else out.

    Shufflehound Support
    Moderator

    In Unyson visual builder you can not add one column in to another so yes you have to figure out something else.

    LeaV
    Participant

    Ok thanks

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)