How to prevent a column wrapping

[mmelton12]

I have a row with two columns (5/6 + 1/6) - I want the columns to stay on the same line, but when I resize browser, the second column breaks. Please advise.

Thanks,
Matt

Edit: I found this answer: https://theme.co/apex/forum/t/3-columns-no-collapse-on-mobile/59594/3 using inline css of display: flex; flex-flow: row nowrap; which works, however the column width adjusts to 50/50% once the screen narrows.

Full width:

This is what happens with the columns with responsive:

This is what I want to achieve with responsive sizing:

[friech]

Hi Matt,

Thank you for writing in, please remove the inline css of display: flex; flex-flow: row nowrap; and add this instead to your Page CSS area.

@media (min-width:320px) and (max-width: 768px) {
  .nowrap .x-column.x-sm.x-5-6 {
    width: 82.66666%;
    float: left;
    margin-right: 4%;
  }
  .nowrap .x-column.x-sm.x-1-6 {
  	  width: 13.33332%;
  	 float: left;
  }
}

Then apply the CLASS nowrap to the Section (where the 5/6 + 1/6 column is).

Remove the (min-width:320px) and on the code if you want it to be inline all the way to 320px and below screens.

Hope it helps,
Cheers!