Uneven spacing and image sizes in Looped Items Slider
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
While waiting for a response from one of our team members, we recommend to check Support Center where it is highly likely that you will find the answer to your question in no time.
FAQ | Video Tutorials | How to