Columns breaking on smaller screens

Support
#1

Hello!

I am trying to make my two columns not break on any screen. They only host images, and I would like them to resize. How do I achieve that? I couldn’t really find anything online that would help me…

Thanks!

#2

Hi Robert,

Thanks for writing in!

By default, all the columns will collapsed and stack on top of each other in smaller device screens. If you want to maintain a two column section even on smaller screens, you will need to do the following:

  • Please insert a custom css do-not-collapse in the “Customize” tab of the section settings

  • And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.do-not-collapse .x-column.x-1-2 {
  float: left;
  width: 48%;
  margin-right: 4%;
}

.do-not-collapse .x-column.last, 
.do-not-collapse .x-column:last-of-type {
    margin-right: 0;
}

We would loved to know if this has work for you. Thank you.

#3

Thank You very much, that solved the problem!

#4

Glad we could help.

Cheers!

#5

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