Topic: Loop Item

Valerrr
November 25, 2025 at 2:45 am

Hello, I am creating a Loop Item with blog posts. I have a few questions about it.

1.

I have set Post Excerpt as follows: {{post_excerpt length:25}}

The problem is that the length of the text is not consistent. Sometimes the text has 5 lines and sometimes 3. Is there a way to set the post_excerpt to a specific length? For example, so that it always displays in 4 lines?

2.
I can’t find the layout settings for mobile phones (horizontal position). Where can I set this?

You can check out the test page.

https://imgur.com/a/i1ujjfX
Ying
November 25, 2025 at 8:33 am
Hi there,

1.1 Select the excerpt (gb-text-9e5fe613), add a CSS class to it, eg. my-excerpt.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

1.2 Add this CSS:
```
.my-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
2. Select the container gb-element-73d941e6, switch to mobile, and adjust its paddings in the spacing panel.
Valerrr
November 25, 2025 at 9:10 am

1. Can I add the CSS code using generateblocks? I still need some advice on this. Or where should I insert the CSS first so that I can then put it into the element using generateblocks – advanced and Another CSS class?

2. I have the looper set to one column on my phone, which is fine. However, when I rotate the phone (landscape – horizontal), I want two columns to be displayed.

Thank you very much.
Ying
November 25, 2025 at 12:01 pm
Here’s how to add a CSS class to the block:
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

And you can add the CSS code to the customizer > additional CSS.

For the layout, can you try this CSS?
```
@media (max-width: 1023px) and (min-width: 400px) {
.gb-looper-a556d3f4 {
    grid-template-columns: 1fr 1fr;
}
}
```
Valerrr
November 26, 2025 at 8:14 am

Thank you very much, it works! I have one last question—I can’t insert the URL address for the post into the image, even though the dynamic tag to insert is: {{featured_image key:url}}

Do you know what the problem is? Alternatively, is there a simple way to make the entire container clickable, not just the title and image?

Test page: https://vitasimo.cz/v/
Ying
November 26, 2025 at 11:58 am
For the image, you need to assign {{post_permalink}} dynamic tag to its link field:
https://app.screencast.com/u4Hna3QcmTTWQ

To create a clickable container, it needs GB Pro or custom CSS if you don’t have GB Pro.

Here’s the doc to create clickable container for GB Pro users:
https://learn.generatepress.com/blocks/block-guide/add-container-links/

If you don’t have GB Pro, try follow steps below:

1. Add a CSS class to the loop item block, eg. container-link.

2. Select the loop item block, set its position to relative.

2. Add this CSS:
```
.container-link a:first-of-type:before {
    content: '';
    position: absolute;
    inset: 0;
}
```

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Loop Item