Way to make columns not stack?

[morgand377]

currently I have a section with 3 columns. They all sit nicely next to each other and at about 767px they all stack on top of each other for mobile. Is there a CSS workaround to make the elements not stack on top of one another? I want to keep all 3 columns next to each other even on mobile devices.Thanks!

[friech]

Hi Morgan,

Thank you for writing in, Please add this to Theme Options > CSS

@media (min-width: 481px) and (max-width: 767px) {
  .stay-inline .x-column.x-sm.x-1-3 {
    width: 30.66666%;
    float: left;
    margin-right: 4%;
  }

 .stay-inline .x-column.x-sm.x-1-3:last-of-type {
    margin-right: 0;
  }
}

Then apply the CLASS stay-inline to your section (of this said 3 columns) under its customize tab.

There is a drawback on these though, some of the device screens are still too narrow for a 3 columns, resulting on the content getting overflown from the column.

Hope it helps,
Cheers!