Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 15, 2023 at 8:45 pm #1401314
    Sandy

    A web page has 6 Blog Posts in a Grid Layout. They look great on desktop. But on mobile they are not evenly spaced. On mobile they present in one column which is great, but the space between each post content is uneven:
    – If the post title takes up 2 lines, there is a medium space below it.
    – If the post title takes up 3 lines, there is virtually no space below it.
    – If the post is the last one in the original row (i.e. post 3), the title has a large space below it.

    How can they be presented with even space between posts regardless of title length or post number?

    March 16, 2023 at 4:52 am #1401335
    Ismael

    Hey Sandy,

    Thank you for the inquiry.

    Are you referring to the blogs posts in the “omitted and omitted omitted omitted services can propel your company forward to the next level” section? The spacing of the items seem to be correct but if it needs some adjustment, you can try this css code.

    @media only screen and (max-width: 767px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
	margin: 0;
	margin-bottom: 50px;
	width: 100%;
    }
}

    Best regards,
    Ismael

    March 16, 2023 at 3:19 pm #1401382
    Sandy

    Thank you, but that doesn’t seem to have an effect. The issue isn’t consistent between the 6 posts. It’s specific to title length and end of row posts on mobile. Screen captures are attached to help clarify the issue.

    March 19, 2023 at 4:16 pm #1401685
    Mike

    Hi,
    Thanks for your patience and the screenshot and the link to your site, try this css:

    @media only screen and (max-width: 767px) { 
#accoladeshome .avia-content-slider .slide-entry-wrap {
    margin-bottom: 0;
}
.responsive #top #wrap_all #accoladeshome .flex_column.slide-entry.slide-parity-odd {
	margin-bottom: 0;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    March 26, 2023 at 6:11 pm #1402560
    Sandy

    Thank you, this removed the extra space at the end of a row. Column 2 spacing is still small, inconsistent (even though column 1 with either two or three lines of heading text is good and consistent). Please see screen capture.

    March 29, 2023 at 5:13 pm #1402941
    Mike

    Hi,
    Thank you for your patience and the screenshots, please try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 480px){
.responsive #top #wrap_all #homeblogposts .avia-content-slider-odd .slide-entry {
    margin-bottom: 40px;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.