I would like to request that the multiple columns currently displayed in separate Column on the mobile view be arranged in a single Column, similar to how they appear in the desktop view. This will help maintain a consistent layout across devices and improve the user experience.
Topic summary
A user requested to consolidate multiple columns into a single column on mobile view to match the desktop layout and improve user experience.
Solution Provided:
- A CSS media query was shared to force single-column display on mobile devices (screens ≤767px wide)
- The code targets
.flexible-layoutand.fixed-layoutclasses, settinggrid-template-columnsto a single column - Implementation involves adding the CSS snippet to the Custom CSS section
Visual Context:
- Screenshots demonstrate the before/after appearance of the layout change
- The solution addresses mobile responsiveness while maintaining design consistency
Status: Resolved with working code solution
Hi @Adesh1
It would look like this if you make it be arranged in a single column as as desktop
But you could make it appear single per column by adding this code to Custom CSS of that section
@media (max-width: 767px) {
.flexible-layout, .fixed-layout {
grid-template-columns: repeat(1, 1fr);
}
}
