Vertical Align elements in a column

Support
#1

I’m trying to align these two text elements to the bottom of the row (stacked on top of eachother as shown) I’ve tried over a dozen answers in previous posts but nothing works. It appears that you used to be able to use the align-baseline or align-bottom tag in the “style” field but that field no longer exists in the new Pro Cornerstone.

Is there an easier way to vertically align things in Cornerstone? It feels like there should be.

#2

Hi @mlc2475 ,

Thank you for reaching out to us. You can vertically align any element by turning on the Marginless Columns. To enable the Marginless Columns, first go to the Row settings of your section (see screenshot)

Then enable the Marginless Columns option (see screenshot)

Then in each of the columns, add the following CSS in the Element CSS area (see screenshot)

$el {
  vertical-align: middle !important;
}

You’ll find the Element CSS field under Columns’s Customize tab (see screenshot)

Let us know how this goes!

#3

Thank you! That worked perfectly. I was able to align-bottom, and add a controlled amount of padding.

#4

Hi There @mlc2475

Your method is also fine. However if you’re having display issues on other devices, you also can check the following method, which is the flex-box way of vertically align content (https://theme.co/apex/forum/t/vertical-alignment-1/58854/2?u=mldarshana).

Thanks!

#5

Hi,

I found this post and it is working for me, except for when things stack in mobile. Please take a look at the last section before the footer.

https://cayastudios.com/

access below

#6

Hello Andrew,

Please be aware that the marginless column option will take effect in larger screens only. In smaller screens, it will automatically collapse and will just stack the columns below each other. The vertical alignment will no longer work as well. To resolve your issue, simply update your custom css from this:

@media screen and (max-width: 900px){
	.Himage, .x-section .x-container.marginless-columns>.x-column {
    	width: 100%;
    	min-height: 500px;
    	
	}
}

Into this one instead:

@media screen and (max-width: 900px){
	.Himage, .x-section .x-container.marginless-columns>.x-column {
    	width: 100%;
    	min-height: 500px;
    	padding-top: 90%;
	}
}

We would love to know if this has worked for you. Thank you.

#7

Thanks! I targeted just the homepage section with this:
.x-section .x-container.marginless-columns>.x-column.HPbox {width:100%;min-height: 250px;padding-top: 40%;}

#8

Hey Andrew,

Glad to hear that and it seems like issue is resolved with your code. I’ve removed your site credentials from this thread because the Secure Note is visible to the topic owner as well and I see you’re not the topic owner.

If the issue persists I’d recommend you to create a new thread and share the details over there. Thanks!

#9

Ah. Thank you! I didnt realize that about secure notes. Ill keep it in mind for the future.

#10

Glad we could help.

Cheers!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.