Set Inline Columns on Mobile
In this article, we're going to explain how to add inline columns on mobile.
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:
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