Uneven spacing and image sizes in Looped Items Slider

kullus · August 9

Hello,

I’m using BeTheme with alternating posts in a Looped Items Slider, and I have two related layout issues.

The first issue is with the excerpt/text length. Some posts have longer text than others, which makes certain items taller and creates large empty gaps between the alternating posts, especially on mobile.

I would like all post items to have a consistent height and spacing, ideally by limiting the excerpt to the same number of lines, for example 4–5 lines.

I have already tried CSS using line-clamp, height: auto, min-height: 0, and different selectors for the slider and its items, but none of them had any effect.

The second issue is with the featured images. Some images are vertical/portrait and others are horizontal/landscape. I would like the layout to remain consistent regardless of the original image dimensions.

Ideally:

all image areas should have the same dimensions or aspect ratio;
portrait and landscape images should not change the height of the post item;
images should keep their original proportions;
images can be cropped automatically if needed, for example using object-fit: cover, but they should not be stretched or distorted;
the alternating layout and spacing should remain consistent on both desktop and mobile.

Could you please advise what is the correct way to achieve this in the Looped Items Slider?

Is there a built-in BeTheme setting for limiting excerpt length and normalizing image sizes, or could you provide the correct CSS/selectors for this layout?

I’ve attached a screenshot showing the issue.

url: [Links visible only for registered users]

Thank you!

Steve

Albert · August 10

Hi Steven,

Length of paragraph in section loop, can be limited by using the custom css below:

.mcb-section-0cw18ylc p:nth-child(n+1) {
 display: -webkit-box;
 -webkit-box-orient: vertical;
 overflow: hidden;
 -webkit-line-clamp: 2 !important;
}

To make all images in Query Loop same height, you need to set custom height under Style tab.

kullus · August 10

Thank you very much, it worked!

I have one more question. In the mobile view, some of the titles break onto a new line in awkward places. How can I fix this?

I noticed that I cannot set a separate title font size for mobile because the title is generated using {title}. Is there still a way to adjust the title size specifically for mobile?

Best,

Steve

Albert · 10:02AM

Since title is in Text Column and not Heading for example with dedicated fields, you need to use custom css to control title size on mobile devices:

@media only screen and (max-width: 767px) {
    h6 {
        font-size: 10px;
    }
}

Uneven spacing and image sizes in Looped Items Slider

Comments

This website uses cookies