Help changing Collection List font size - Ride theme

Store Design
, , ,
1

I previously had my theme setup perfect but after some major reworks I have broken the way mobile font is displayed in my collection list on my home page and it’s extremely ugly and killing me aesthetically.

The first image is how my site looks now with overly large text that doesn’t sit well and the second image is from my previously saved theme.

Can anyone please assist me in changing it back to how the second photo is so it’s small and all fits again and if you can somehow work out what text font that is, I’ll love you forever. This has been a battle trying to solve this on my own.

My website is https://downunderthunder.com.au

1.jpg
1.jpg599×1782 125 KB

2.jpg
2.jpg599×823 58.2 KB

2

@JayFinlay Hey, thanks for posting here.

set card width 100% on mobile.

3

Hey @JayFinlay

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

RESULT:

Moeed_0-1719917364998.png
Moeed_0-1719917364998.png364×259 39.7 KB

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

Best Regards,
Moeed

4

@JayFinlay

@media screen and (max-width: 520px) {
    .section-collection-list .grid__item {
        width: calc(100% - 8px);
        max-width: unset;
    }
}
5

That is perfect but is there a way to center it so the longer worded collections sit aligned in the middle?

I owe you greatly, thank you for going above and beyond twice.

6

Hey @JayFinlay

Remove the previous code and add this new code with the same steps mentioned above. It will make the UI look much better of the cards.

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

Best Regards,
Moeed