Vertically center columns, swap columns on mobile (X Pro)

[Adams]

Hello. On dev1.thumbprintbooks.ca/family-stories I’d like to vertically center all the columns on the page. I have added the following to the Page CSS (based on a prior topic you had answered), but it isn’t forcing the columns to be centered:
.x-section .x-container.marginless-columns .x-column {
vertical-align: middle;
}

Also I would like the columns in the rows with gray background to be swapped on mobile, so that the heading, text, and image are always in that order. I tried some solutions from other topics in Support, but they didn’t work. So am turning to you.

Thanks.

[ruenel]

Hi There,

Thanks for writing in!

1.) Your custom css code will only work if you can enabled the marginless column option. You can find this option in your row settings.

2.) Please rearrange your elements in the rows with gray background in the same order as heading, text and image. We will then have to swapped it in desktops to display image, heading and text by adding a custom right class for the left column with an additional inline css margin-right: 0;

Hope this make sense.

[Adams]

Thanks. Ordering the columns worked fine.

Now I need to vertically center the content of the columns. As noted when I started this topic, I have added the following to the Page CSS (based on a prior topic you had answered), but it isn’t forcing the columns to be centered:
.x-section .x-container.marginless-columns .x-column {
vertical-align: middle;
}

However, the content is not being centered vertically in the columns. Not sure why…

[ruenel]

Hey There,

Your css code is correct. It’s just that it is not applying to the page because none of you rows is using marginless columns.

Screenshot

Please edit your page and make sure that marginless columns is enabled in your row settings.

Hope this helps.

[Adams]

Okay. That solved the problem of vertically centering the rows, but now the text in gray rows isn’t switching to the right on desktop. For each of the columns with text in gray rows, the column with text is on the left and the column for the image is on the right, and in custom CSS for the column I have entered the custom right class and added inline margin-right: 0; How do I force those columns now to swap in desktop display?

[christian]

Hey @Adams,

That is not possible out of the box so custom development is needed. Regretfully, that is outside the scope of our support. You can follow the custom CSS here by an X user.

The supported way of switching columns is by duplicating the section/row then hiding the first one using the Hide During Breakpoints feature. Please see this screen recording for more details.

Thanks.

[Adams]

I had wondered whether that would be the solution. I’ll use the Hide During Breakpoints feature—which I really appreciate, by the way.

[ruenel]

Great news!
If you need anything else we can help you with, don’t hesitate to open another thread.