Layout 121 CSS Issues

At a glance

The community member is using a CSS layout library and has two issues: 1) they want to make the left column sticky within the section, but can't figure out how to do it, and 2) if they add too much text in the "cards" section on the right, it creates a weird margin between the first icon and the animation line. Other community members suggest making the parent of the left column position: relative and the left column itself position: sticky, adjusting the top value accordingly. For the line issue, they suggest adjusting the top position of the buy_2_property-types_progress-bar-wrapper element and the height of the buy_2_property-types_progress-bar element. The community member confirms that the suggested solutions worked for them.

Useful resources

FFalko Piguet

Hey everyone,

I am in need of some CSS help here.

I am using https://library.relume.io/components/layout-121 for a section on a website. I have two small issues:

I would like to make the left column sticky within the section, but can't figure out the way to do it
On the right column, if I add too much text in the "cards" section, it creates a weird margin between the first Icon and the line for animation. If anyone was able to fix that, please let me know

11 comments

FFalko Piguet

AAndy Bittner

If you change the parent of the left column to position: relative and then add position:sticky to the left column it should be sticky. You have to adjust top accordingly to your needs. For the line I am not sure. Would be helpful if you could share a read-only link 🙂

FFalko Piguet

Thanks for the help! I tried to add relative/sticky relation but it does not work as I think the column size is automatically adjusting to the highest column of the grid.

Here is the link:
https://preview.webflow.com/preview/pes7?utm_medium=preview_link&utm_source=designer&u[…]174296ba8e&pageId=659570dcc31eb0b3892f9f77&workflow=preview

AAndy Bittner

In the column below position:sticky you have to enter a value for top. If it is auto for all 4 sides it wont work 🙂

AAndy Bittner

I tested it with 50 and it works 🙂

AAndy Bittner

<@U058KEN2LDQ>

FFalko Piguet

🙏🙌❤

AAndy Bittner

For the line you can adjust the start of the line by finding the buy_2_property-types_progress-bar-wrapper and change the top position as marked in the screenshot 🙂

AAndy Bittner

You might have to adjust the height for the buy_2_property-types_progress-bar element so it goes all the way to the last element and doenst stop somewhere in between 😄

FFalko Piguet

That worked like a charm. I did some initial workaround and then implemented your solution. Thanks for all the tips !

Add a reply

Community forum for knowledge and support

Layout 121 CSS Issues