Hi Experts,
Is it possible, by Custom Css to make these 3 columns show side by side on mobile view exactly like in desktop view?
Please check attached images;
Topic summary
Request: Make three columns display side by side on mobile exactly as on desktop using custom CSS; screenshots provided to illustrate current/desired layouts.
Response and guidance:
- Feasibility: Yes, CSS (Cascading Style Sheets) can force three multi-column boxes side by side on mobile.
- Usability caveat: On narrow mobile screens, three side-by-side columns will render very small, risking unreadable content.
- Recommended alternative: Use a slider (carousel) on mobile so each box appears in a swipeable view—more readable and visually clean.
- Offer to help: If side-by-side is still desired, share a store preview link (and password if protected) so tailored CSS can be provided.
Notes:
- Attached images are central to understanding the current vs. desired layout.
- “Slider/carousel” refers to a swipeable component that shows one item per screen.
Status: No CSS or code shared yet; awaiting the store preview details. The discussion remains open with the next action on the requester.
HI @Hugobrunto
This can be done easily to create three multi-column boxes side by side on mobile. However, the width of mobile screens is very short, so when we set the columns side by side, the content becomes very small and unreadable.
I suggest using a slider option for mobile views, which works well because it allows each box to be displayed as a slider. This not only looks good but is also readable.
If you still want to try making the boxes side by side, kindly share your store preview link and password if it is password protected I can write the CSS code for you which make it side by side on mobile