Collection list 2 rows of collections mobile, narrative

Solved
Olbap
Tourist
19 0 2

 

Hello good day

 

Im having an issue with the collection list page on the mobile version. Im using NARRATIVE theme.

In mobile version, in the collection list page I have the collections one by one and in a big size. I want to put 2 or 3 rows of collections to make the page smaller and easier for the customer, to not scroll all the time to see the collections. I tried some css codes but not worked. Could anyone help me please?

 

Thank you

 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9747 2227 3060

This is an accepted solution.

@Olbap 

  Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px) {
.list-collections-template .grid__item {
    float: left;
    padding-left: 0px !important;
    width: 100%;
}
.list-collections-template .card {
    width: 50% !important ;
    opacity: 0;
    transition: all .5s ease-out;
    -ms-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    display: inline-flex !important;
    padding-left: 16px !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
9747 2227 3060

@Olbap 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Olbap
Tourist
19 0 2

@dmwwebartisan 

 

 

Here you can see the collections one by one. I need to put more rows or something!

 

thank you

dmwwebartisan
Shopify Partner
9747 2227 3060

This is an accepted solution.

@Olbap 

  Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width: 749px) {
.list-collections-template .grid__item {
    float: left;
    padding-left: 0px !important;
    width: 100%;
}
.list-collections-template .card {
    width: 50% !important ;
    opacity: 0;
    transition: all .5s ease-out;
    -ms-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
    display: inline-flex !important;
    padding-left: 16px !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Olbap
Tourist
19 0 2

@dmwwebartisan 

Sorry not worked that code, the whole page is now empty all in white, no images and collections now

 

dmwwebartisan
Shopify Partner
9747 2227 3060

@Olbap 

Please check screenshot 

2021-09-17_18-37_Colecciones – Terps Plates.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Olbap
Tourist
19 0 2

@dmwwebartisan 

 

Now is working, i changed the opacity to 100% and its perfect

Thank you legend!

 

Maybe could you help with other thing? I opened a conversation but not solution yet..

I want to change the number of rows of the product submedia gllery. Actually I have two or three rows and i want to put all the submedia gallery images in one row. Could be possible?Sin título.png

Olbap
Tourist
19 0 2

@dmwwebartisan 

It worked, i changed the opacity, thank you