Collection list size in mobile - IMPACT THEME

Serenity3 · ‎02-02-2024

Link: Popular Brands (serenityskinstore.com)

Trying to make the collection list size smaller in mobile, have tried adding several different css code lines into theme.css and the liquid file that i found on this community forum but none have worked.

I want the images to be smaller on mobile only and also the text to match the smaller size on mobile. atleast 2 or 3 images in one row. Please let me know

ThePrimeWeb · ‎02-02-2024

Copy this instead @Serenity3, You can keep the old code if you like the design for the product collections

<style>
@media only screen and (max-width: 768px) {
    collection-list.collection-list {
        grid-template-columns: repeat(2, auto);
    }

    collection-list.collection-list .collection-card__content.prose p {
        font-size: 1.5rem !important;
    }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-02-2024

@Serenity3,

I think if you apply the code to fix the stack, then it would clash with the other one and then none of the codes would work.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-02-2024

Hey @Serenity3,

You should try this and see if it helps 😊

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 768px) {
    .collection.collection--filters-sidebar {
        grid-template-columns: repeat(1, auto) !important;
    }
    
    .collection__top-bar {
        grid-template-columns: repeat(2, auto) !important;
    }
    
    product-list.product-list {
        grid-template-columns: repeat(3, auto);
    }
    
    
    product-list.product-list .product-card__info span{
        font-size: 0.7rem !important;
    }

    .facets-summary {
        flex-direction: column-reverse !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Serenity3 · ‎02-02-2024

Hey, ive updated the code here but there is no change for mobile view

ThePrimeWeb · ‎02-02-2024

Hey @Serenity3,

Can you check again? I can see the changes on my phone now

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ThePrimeWeb · ‎02-02-2024

Oh, sorry. I applied it in the wrong section. I applied it here. If you don't want this, you can remove the code. I will send you the one for the collection list in a while

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Serenity3 · ‎02-02-2024

Still looks like this for me. Could you share a screenshot?

ThePrimeWeb · ‎02-02-2024

Copy this instead @Serenity3, You can keep the old code if you like the design for the product collections

<style>
@media only screen and (max-width: 768px) {
    collection-list.collection-list {
        grid-template-columns: repeat(2, auto);
    }

    collection-list.collection-list .collection-card__content.prose p {
        font-size: 1.5rem !important;
    }
}
</style>

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ThePrimeWeb · ‎02-02-2024

Hey @Serenity3,

Sorry, I updated the code above to reduce the font-size as well

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Serenity3 · ‎02-02-2024

Thanks so much, it works! Just one thing, is it possible to still have these apply if the collection is not checked as "stack collections" if i have it unchecked it looks like this, but the other way around its fine. Let me know if there is a workaround, otherwise no worries

ThePrimeWeb · ‎02-02-2024

@Serenity3,

I think if you apply the code to fix the stack, then it would clash with the other one and then none of the codes would work.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

alpe · ‎06-04-2024

i wanna move the heading. i don't want it at the center of the collection image but just below centered on the left. how to do it?

Collection list size in mobile - IMPACT THEME

Collection list size in mobile - IMPACT THEME

Community Blog Articles