Missing Style from New Column

[tomr96]

Hi,

I understand this new Column thing is supposed to improve things, but man it has made simple things so much harder.

All I want to do is vertically align content to the center of the column.

Before I did this by going into said column and pasting in “vertical-align: middle;text-align: center;” into the Style box… Now this is gone and I have pasted it into every other box I can find after spending hours trying to get it working.

I am currently just using padding but that’d not what I want… I just want the basic vertical-align: middle;text-align: center; - I.e. everything in the middle of the column.

I’ve added in
$el
{
vertical-align: middle;
text-align: center;
}

To the column CSS bit and it centers it but won’t vertically align it.

Tested and working fine in the old one.

Please can you help me with this as it’s driving me insane.

Is there any way I can go back to the Classic Column that worked amazingly well for most things for me.

At the moment I just have a template one that I use to put into each page and then work from there.

Thanks.

[tomr96]

OMG I did it. Sheesh.

This was the solution: https://theme.co/apex/forum/t/pro-how-do-i-align-content-of-columns-vertically-in-pro/37933/4

Adding !important after
vertical-align: middle

So it now reads
$el
{
vertical-align: middle !important;
text-align: center;
}

How am I supposed to know what to add !important after or not?

Can I just do it for every CSS I add?

Thanks.

[albrecht]

Hi Tom,

We are glad you were able to figure it out!

Yes, you can apply it to every CSS you add but the only time you need it is when you do an inspect element and see that your CSS has a strike through, meaning it has been overridden by another css.

The !important property in CSS is used to provide more weight (importance).

Hope it helps!