Vertical positioning of content in columns

Support
#1

Hi there,

I’ve followed a guide of yours to achieve swap columns – works perfectly. However, I’m having some troubles applying {vertical-align: middle} to all columns. The page in question is this: https://www.knowledgeworker.dk/digital-transformation/

The problem more specific is with the text on the right and images on the left.

Can you help me solve this?

Regards,
Carina

#2

Hi Carina,

Please find this custom CSS:

@media (min-width: 767px){
    .x-section .x-container.swapcolumns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}

And change to this:

@media (min-width: 767px){
    .x-section .x-container.swapcolumns {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        align-items: center;
    }
}

Hope it helps :slight_smile:

#3

Thanks, it works like a charm :slight_smile:

I have another question: can I force the shift from two columns to one to be applied on bigger screens as default to prevent my design from looking messed up?

#4

Hello @KnowledgeWorker,

Thanks for updating the thread.

Can you please elaborate the question a bit more? So far what I have interpreted, you want to change the layout from two column to one column. If I have misinterpreted, please correct me.

Using Media query, you can change the viewport size so that the code will affect those screen sizes. I suggest you to take a look at following thread for more information.

Thanks.

#5

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