How can I display three columns on one mobile screen?

Store Design
, , ,
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.