[Support request] How to fix the height of the grid?

Hi Karan,

Sorry for the late response. We weren’t alerted by your previous response. It may have slipped through our system.

To clarify, do you want a specific max height for this section: https://share.getcloudapp.com/E0uRO79K but you don’t want it to scroll?

If you want this, are you open to trimming the text?

You can try:

1. Add this CSS to your site:

.line-clamp {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

Note this property: -webkit-line-clamp: 2; this sets the number of lines it will display.

2. Select the Headline block and in Advanced > Additional CSS Class(es) add: line-clamp

The height of the scroll container can’t automatically update based on the height of that title.
It would require JS and get very messy.

I would approach it lie so …. OK, trust me on the following steps:

1. Select the Container Block that has the Headline and author text inside it.
1.1 In its Spacing add 5px bottom padding. And a 1px bottom border.
1.2 Set the Advanced > Additional CSS Classes to line-clamp sticky-header
1.3 Now move the container inside the overflowy Scroll container

2. Delete the Container with the Separator – as the border added to the above container will replace that.

3. Select the overflow scroll container and give it some bottom padding, so it doesn’t touch the border below it.

4. Add this CSS:

.sticky-header {
    position: sticky;
    top: 0;
}

4. Edit this CSS:

.overflowy {
    height: 262px !important;
    overflow-y: auto;
}

And increase the 262px to compensate for the Header inside it.

This will make the header sticky, so it will not scroll and you can control the overall height of the grid.

Hi Karan,

You can set a background color for the heading part.

There isn’t an alternative method unfortuately. There is no magic method to adjust the height of two separate containers.

You’re welcome