How to fix the height of the grid?

Hi there,

so do you want the height of the Bottom Container to shrink when the top Containers height increases ?
And if so, should the Top containers content also scroll ?

If thats the case, then you would need to combine the content of both containers.

I don't want the top container to scroll. please check this sample website.

Please check both the link. In the Screenshot i have marked it as red. and in the 2nd url when you will scroll down you will find that area.

You will see the content in the heading is fixed and also not effecting the bottom container height.

Please answer my question...?

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?

Yes, i want it of specific height.

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

Thank you David for your reponse. It helped me a bit.

But my main concern is that. the below height should be align with "Get On Amazon" button, I have set the overflowy height according to that. But it is getting expanded. Please check the Screenshot for more understanding.

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.

Thanks David for this information. It is working. But there is a problem. The below container contents are getting overlay to the heading part.

Please check the screenshot and the url for better understanding.

Hi Karan,

You can set a background color for the heading part.

Thanks Ying. But is there any other way of doing it because i don't want to put any background into it.

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

Thank You David for your information.

You're welcome