3 columns no collapse on mobile

[incommon]

Hello I am trying to create a table style layout, which is easy however I would like the section to not collapse on mobile and keep 3 columns. I have found css fro 4 columns collapse to 2 but cannot get 3 columns to just stay in line no collapse.
see here: https://garagekingsdealers.com/investment/

Thanks for any help!

[nabeel]

Hi @incommon,

Thank you for reaching out to us. To achieve this, first assign your main section a class e.g no-stack and then add the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    .no-stack .x-column.x-sm.x-3-5 {
        float: left;
        margin-right: 2%;
        width: 58.4%;
    }
    .no-stack .x-column.x-sm.x-1-5 {
        float: left;
        width: 16.8%;
        margin-right: 2%;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[incommon]

Thanks for the css solution!
However Michael Paul Bourne in the X Pro facebook group gave me a very simple solution using flex box. For anyone else reading this thread simply put this code into your INLINE CSS for the ROW:

display: flex; flex-flow: row nowrap;

Works like a charm! the entire row will not collapse at all.

[jade]

Thanks for sharing your solution, @incommon.