How can I adjust the alignment of a collection list on mobile?

Store Design
, ,
1

Hi,

I’m trying to figure out how to adjust the alignment of this particular collection list. I want it to be on 2 rows. Each row is filled out with 3 collection items.

I’ve adjusted the collections-per-row on the desktop interface to make them stand on the same row. But it oddly changed itself to this layout on the mobile.

Can any experts here help me solve this problem?

Thanks in advance.

james_chan_0-1689662497636.png
james_chan_0-1689662497636.png526×680 157 KB

The theme I use is Impulse.

2

Hello, you can provide url site for me, I’ll check it for you

Thank you

3

Hey @james_chan
Kindly share your Store URL and Password if enabled

4

https://www.allnicewigs.com/

Thanks in advance! :slightly_smiling_face:

5

https://www.allnicewigs.com/

thanks in advance. :slightly_smiling_face:

6

Yes, you can open file theme.css and paste my code at bottom file:

@media (max-width: 768px){
#shopify-section-template–16764078424322__82d95c29-35a1-4338-a2d3-e37d469f2ce3 .small–one-half{width:32%;clear:none;}
}

it will work for you

thank you

7

@media (max-width: 768px){
#shopify-section-template–16764078424322__82d95c29-35a1-4338-a2d3-e37d469f2ce3 .small–one-half{width:33%;clear:none;}
#shopify-section-template–16764078424322__82d95c29-35a1-4338-a2d3-e37d469f2ce3 .grid {display:flex;flex-wrap: wrap;}
}

or you can use code this

8

Hey @james_chan

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1689678164142.png
Moeed_0-1689678164142.png160×350 65.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

Thank you so much. It works perfectly!

10

I’m glad it worked for you. If I managed to help you then I’ll appreciate if you can Like the post as well!

Best Regards,
Moeed