Force Items to align at the bottom

Support
#1

I need help to align items to the bottom of a column when each column has a different amount of text.
I would like the text box “Only”, A custom headline “Price”, a text box “Phone Number” and the button to align even with each other in each column at the bottom. See attached image.

#2

Hi There,

Thank you for writing in, you can actually create an identical ROW with no spacing below on what you have now (marginless, 1/3 columns with color backgrounds).

And then move the text, headline, and button element on that second ROW. That way the content of your second ROW will always align on the bottom of the section regardless of the content of the first ROW.

Hope it helps,
Cheers!

#3

Thanks, but when i do this and the screen size changes (smaller) the 2nd row (where the new price point would be) will not be directly below the product, the 2nd row jumps below the first row.
I know i can hide the 2nd row but how do I hide only select text boxes in the 1st row?

Does this make sense?

#4

Hi There,

You can apply this classes to hide a specific element on a specific screen width.

x-hide-xl = 1200px and up
x-hide-lg = 980px – 1199px
x-hide-md = 768px – 979px
x-hide-sm = 481px – 767px
x-hide-xs = 480px & Smaller

Hope it helps,
Cheers!

#5

Thanks,
is there a spot somewhere for a guide of the different classes? I was looking and only found the Margin spacing classes but didnt see these or any others (or did i just not see them)?

#6

Hi There,

Those classes above are the classes that the Hide Base on Screen Width feature will apply. But because we don’t have the Hide Base on Screen Width option on elements, we need to manually put that classes instead. Nope you won’t see that classes anywhere in the documentation.

Thanks,