Set Inline Columns on Mobile

In this article, we're going to explain how to add inline columns on mobile.

  1. How to Add Inline Columns on Mobile
  2. Custom CSS Way
  3. Alternative FlexBox Way
  4. Summary

How to Add Inline Columns on Mobile

The following code will implement inline columns on mobile based devices.

Custom CSS Way

Add the code below to X/Pro > Theme Options > CSS

@media (max-width: 767px) {
 .x-section.inline3 .x-column.x-sm.x-1-3 {
    width: 32.66666% !important;
    float: left !important;
  }
}

Note: This code only works for a three column layout setup.

Alternative FlexBox Way

The other alternative way which will work for all columns is to use the FlexBox CSS feature. To have the inline columns in the section you need to go to the section options in question and click on the Customize tab and add a Unique Class for example: inline-columns:

Inline Column Class Example

Additionally you'll need to add following custom css to the theme by going to X/Pro > Theme Options > CSS:

@media (max-width: 767px) {
 .inline-columns .x-container {
    display: flex;
 }
}

Summary

Great job! You now have an inline columns on mobile devices.

See something inaccurate? Let us know