Columns not stacking on mobile

[eckiles]

Hi,

my columns are not stacking on mobile in the “Willkommen”-section. Everything else is stacking just fine on the site. Could you please help?!

Summary

http://residenz-hotel-schlangenbad.de/wordpress/

[rad]

Hi there,

Thanks for writing in.

It’s because of this inline CSS added to the section’s row

display: flex;align-items: center;height: 100%;min-height: 100%;

Section’s row doesn’t have any flex layout option so you probably added it to its inline CSS option. If it’s intended to be applied to that row (margin-less) then please remove that inline CSS, instead, add this CSS to Element CSS option.

@media ( min-width: 980px ) {
$el {
display: flex;align-items: center;height: 100%;min-height: 100%;
}
}

This makes sure the CSS is applied to the desktop where stacking is not applicable.

Thanks!

[eckiles]

Thank you! This helped a lot.

Except for the middle row. I guess this is dependent on the display:flex. Is there a solution to this…???

[christian]

Hey @eckiles,

The flex direction of that row must be set to column reverse in 767px screen width and below. You will need to add this custom CSS.

@media (max-width: 767px) {
    .x-section .x-container.swapcolumns {
        flex-direction: column-reverse;
    }
}

Please note that we are using custom CSS here and that is outside the scope of our support. What I have suggested serves only as a guide. Fixing issues that would arise from the use of the code and further enhancements should be directed to a third party developer.

Hope that helps and thank you for understanding.

[eckiles]

Thank you very much! It worked!

[christian]

You’re welcome. Glad we could help.