Collection list size in mobile - IMPACT THEME

Solved

Collection list size in mobile - IMPACT THEME

Serenity3
Tourist
9 0 1

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

Accepted Solutions (2)
ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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
Shopify Partner
2138 615 493

This is an accepted solution.

@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

Replies 10 (10)

ThePrimeWeb
Shopify Partner
2138 615 493

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.

ThePrimeWeb_0-1706899570347.jpeg

 

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
Tourist
9 0 1

Screenshot 2024-02-02 235018.png

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

ThePrimeWeb
Shopify Partner
2138 615 493

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
Shopify Partner
2138 615 493

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

ThePrimeWeb_0-1706900094359.png

 

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
Tourist
9 0 1

Serenity3_0-1706900128347.png

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

ThePrimeWeb
Shopify Partner
2138 615 493

This is an accepted solution.

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
Shopify Partner
2138 615 493

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
Tourist
9 0 1

Serenity3_0-1706900887020.png

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
Shopify Partner
2138 615 493

This is an accepted solution.

@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
Visitor
1 0 0

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?