Column Break Points

Support
#1

Good morning Themeco,

I have a question about column break points. I’ve noticed a few times that when using a four column layout, on tablets the columns become very thin and squashed instead of breaking into two columns. This looks pretty awful to be honest and isn’t how I would have expected the layout to behave. How can I make it so that a four column layout becomes two columns on a tablet and then breaks down again, into one column on mobile please?

Thanks guys.

#2

Hi There,

Could you please provide us with your website URL so we can take a closer look?

Thank you.

#3

Of course please see below. It’s the what we do section with four feature boxes.

#4

Hi again,

Please add the following CSS code in the Theme Options > CSS:

@media screen and (max-width: 768px) {
  .x-column.x-1-4 {
    width: 48%;
    margin-right: 2%;
    margin-bottom: 2%;
  }
  .x-column.x-1-4:nth-child(2n) {
    margin-right: 0;
  }
}
@media screen and (max-width: 480px) {
  .x-column.x-1-4 {
    width: 100%;
    margin-right: 0;
  }
}

Feel free to change the break points if needed.

Hope this helps!

#5

Wonderful, thanks so much for this!

#6

Glad we could help :slight_smile:

Cheers!

#7

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