How can I display three columns on one mobile screen?

Store Design
, , ,

Topic summary

A user wants to display three columns in a single mobile screen view for their collection page, similar to a reference site. Currently, their columns don’t fit properly on mobile devices.

Solutions proposed:

  • oscprofessional suggested adding CSS to base.css targeting .collection__nav__item with padding adjustments at max-width 768px
  • zaczee recommended similar CSS code in custom.css with font-size modifications at max-width 767px

Current status:

Neither solution worked for the user’s specific implementation. Finer identified the root cause: the section has a fixed width larger than most mobile screens.

Recommended fix:

Add flex-wrap:wrap; to the flex-container, or dynamically adjust font-size, spacing, and flex-direction (column) to fit content without overflow. However, this approach may compromise visual quality on mobile.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Hey there! So basically I have a section that shows 3 columns and on other website the section is displayed fully in just one mobile screen something like this:

Capture.PNG
Capture.PNG238×392 49.9 KB

But on my website it is being displayed something like this:

1.PNG
1.PNG254×406 22.7 KB

I wanna display all those 3 columns in just one mobile screen, any solution?
Here’s the preview link: https://kzvtkcmqf6iwdo39-18450743360.shopifypreview.com/

2

Hello @Moeed

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media (max-width: 768px){
.collection__nav__item {
    padding: 0 2px !important;
}
}
3

Hi @Moeed ,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

@media (max-width: 767px) {
  li.collection__nav__item { font-size: 10px; }
}
4

Both of the solutions didn’t worked, I want this to be done at this link so please if you’re testing code then test it at this link now: https://saya.pk/collections/summer-sale-2023

5

@Moeed the problem is, that you have a fixed with on the whole section, which is larger than most mobile screens. You could add to the flex-container Wrap-Attribute

flex-wrap:wrap;

But this does not look excellent. Otherwise, you’ll have to dynamically change the font-size, spacing or the flex-direction (column) to get everything on a mobile screen without overflow.