How to fix alignment of collection bubbles

Store Design
1

Hey so basically I have created collection bubbles type on my home page but it’s giving some alignment issues like if you see it on responsive mode from inspect element then it will be displayed properly like this

1.JPG
1.JPG571×539 26.5 KB

But if I display on like for example iPhone XR then it won’t be displayed properly as shown below

2.JPG
2.JPG585×540 26.7 KB

The iPhone XR is just an example I want to fix the alignment for every mobile size

So can anyone help me out in fixing it’s alignment?
PS: These collection bubbles are only visible on mobile
Store URL: https://www.saya.pk/

2

Hi @Moeed ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/custom-style.scss->paste below code at the bottom of the file:

@media screen and (max-width: 540px) {
    .body-full .collectionList-mob .collectionList-inner h4 {
        height: 32px !important;
        overflow: hidden !important;
    }
}

I hope it would help you
Best regards,

Kate | PageFly