Help changing Collection List font size - Ride theme

[JayFinlay]

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

[ProtoMan44]

@JayFinlay Hey, thanks for posting here.

set card width 100% on mobile.

[ProtoMan44]

@JayFinlay 

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

[Moeed]

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 </body> tag

<style>
@media screen and (max-width: 767px) {
h3.card__heading {
    font-size: 15px !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[JayFinlay]

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.

[Moeed · Accepted solution]

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.

<style>
@media screen and (max-width: 767px) {
h3.card__heading {
    font-size: 15px !important;
}
.card__information {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
</style>

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

Best Regards,
Moeed