Collection list 2 rows of collections mobile, narrative

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

@Olbap

Please share store URL!

Thanks!

@dmwwebartisan

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

thank you

@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;
}
}

@dmwwebartisan

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

@Olbap

Please check screenshot

@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?

@dmwwebartisan

It worked, i changed the opacity, thank you