Hi,
I am using the method available on https://michaelbourne.ca/create-columns-equal-heights/ to create same height in columns (which it worked), but I can’t make the buttons aligned to the bottom, to work, through CSS.
The description says to add .container (CSS) to the column Class and the .item-button to the button Class, even though there is a .x-container:before, which I don’t know where to place. I tried a few options but none of them worked.
Can you help me?
Cheers
Hi There,
Thanks for writing in!
to make the buttons always in bottom of the column you need, custom CSS for the buttons.
Please add this code to the element style of both buttons.
$el{
position: absolute;
transform: translateX(-50%);
bottom: 20px;
left: 50%;
}
You may need higher bottom padding of the columns because when content increases the button may over lap to it as its in absolute position. We can’t help you on this more as this is something related to a custom code.
Hope this helps!
If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.
I recommend you to watch following video that will help you to get started with CSS.
Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Thanks.
Hi basanta,
Thank you for you help.
It did the trick with the proper padding.
Cheers
You’re welcome. Glad we’re able to help.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.