About elements on a column (v2)

[Ogalla]

Hello! I have a question about how to center the text in columns (v2) and how I can use the images inside them.

1. How can I center elements like ‘Text’? For example, I want to center a text in the middle of the column (horizontally or vertically).
2. How can I add an image and have it fill the entire column?

In classic column I can use ‘CLASS’ and add CSS code, but how I can do these actions in V2 columns?

Thank you very much.

[rad]

Hi Jorge,

Thanks for reaching out.

1. I assume you’re referring to actual flex alignment (which is element alignment) and not the text alignment one, to do that, please enable Flexbox Layout option while you’re inspecting V2 column. You can then align it vertically or horizontally,

2. Images are only limited to its max-width, it can’t fill any container bigger than the image itself. Else, image with lower resolution will appear pixelated if stretched out on larger container. If the actual image size is bigger than column container, then it should automatically fill without any need for other options/CSS. But if you wish to force it given that it may look pixelated, then please add this CSS to your image’s Element CSS.

$el, $el img {
width: 100%;
max-width: 100%;
}

It should be the same with classic and v2 column when it comes to Class, and there is Element CSS too. But there is no need to CSS for flex alignment for v2 columns.

Hope this helps.

[Ogalla]

Hi @Rad.

I have tried these actions, but I don’t find the following:

1. The Flexbox Layout option in column (I add a screenshot where you will be see the options I can manage). How can I activate this option?

2. Respect of the images, I can’t see the SETUP taht you say (which you show in the picture).

I hope your help again!

Thank you very much.

[rad]

Hi Jorge,

1. That’s a classic column, this is v2 column should be

When Advanced Mode is active

When Advanced Mode is inactive

None of it is similar to your screenshot since your columns are still a classic columns.

Please start from scratch, add v2 Section first, then any row or columns that you add will be v2. The existing classic columns will not automatically convert to v2 column.

2. Sorry, I should’ve provided the entire screenshot

But again, if you’re on classic image then that’s the reason why it appears different on your end. But if it’s really on classic image, then what you need is just add width: 100%;

Just scroll it down and you’ll find that setting since there is no Setup/Design/Customize divisions.

Thanks!

[Ogalla]

Hi @Rad.

I have checked my settings options and the Advanced Mode is active but I don’t see the same like you. How I can add a V2 section? I think this is the step which I am not doing correctly.

Thanks!

[jade]

Hello Jorge,

It could be possible that you are using element that do not have the same options since some custom options are available in some elements and are not in other elements just like the flex option.

If you add a new section in Cornerstone, it should automatically be a v2 section.

Would you mind providing the login access to your site in a secure note and let us know which element you are looking into where you can’t find the options mentioned so that we can check it?

Thank you.