How to use Cornerstone to set up a vertically-centered text block?

Support
#1

I am trying to set this up using Cornerstone, but I can’t figure out how to get the text boxes to be vertically aligned.and remain responsive: https://imgur.com/a/UB1YB

(I used Ubergrid and tried copying its “hover” css but that didn’t work)

In the “Elements” showcase page, there seems to be a way to do this, but there are no instructions on how to set it up:

[Album] Imgur

Thanks!

#2

Hi there,

This feature is currently not a feature available in Pro at the moment.

A workaround would be turning on the Marginless Columns of the row that contains the columns then add a padding to each column to add a space that was removed the the option was enabled.

Then add a class to the column that contains the text that you want to center vertically. Assuming you added the class vam then add this code in the custom CSS:

.vam {
    vertical-align: middle !important;
}

Hope this helps.

#3

I’m sorry, I can’t follow these instructions without screenshots of every step-- Cornerstone is confusing. I think I’ve done everything but where do I put the custom CSS? Here’s what I’ve got so far:


^ Turned on Marginless columns

^ Added padding to column with text

^ Added vam to class

^ Formatted section, but not showing up, and can’t find where to put this:

.vam {
vertical-align: middle !important;
}

1 Like
#4

OK, I mostly figured it out because I updated to the latest version, but as you see, there is a space between the two columns at full screen width. How can I get rid of that? Because if you go here you can see that Ubergrid is behaving correctly.

#5

Hi There,

Please provide the URL so we can take a closer look.

Thanks

#6

http://emergencyadapters.io
It’s at the bottom of the home page.
I’ll send you the login details.

#7

Hi there,

  • Select the image and click on the eye icon so that it will be set to it’s full width which is 793px

  • The text width the gray background is not vertically centered because you have added

.vam {
    vertical-align: middle !important;
}

in the Inline CSS field of the column. Please remove it from there and put it in X > Launch > Options > CSS

Also, for the column with the text, remove the top and bottom padding set to it so that it will be vertically centered.

This should be the result (replicated on my local setup)

Hope this helps.

1 Like
#8

Sure did! That all totally worked. Thanks so much!

#9

You’re most welcome.

#10

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