Reorder category list from shop page on Brine

Site URL: https://kindstudio.fr/shop

Hi,

I'm trying to reorder the categories from my shop page. I've already tried a few replies from the forum but it doesn't seem to work on Brine template.

Here's the link to the website I'm working on: https://kindstudio.fr/shop

Thanks for your help !

Robin

Which order do you want? on Desktop/Mobile

On 2/28/2020 at 4:35 PM, tuanphan said:

Which order do you want? on Desktop/Mobile

Both if possible :) 

22 hours ago, moretrobin said:

Both if possible :) 

Which order item do you want?

3 minutes ago, tuanphan said:

Which order item do you want?

Add to Home > Design > Custom CSS

/* Table - Desktop */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}

/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
}

do similar for other items...

4 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* Table - Desktop */
@media screen and (min-width:641px) {
ul.ProductList-filter-list {
    display: flex;
    flex-direction: column;
}

/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
}

do similar for other items...

Thank you so much it's working !! How can I implement this on mobile as well ? 

@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 6;
}
}

Do similar for other items

On 3/3/2020 at 2:03 PM, tuanphan said:

@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 6;
}
}

Do similar for other items

Hey, 

I did add the following code but it doesn't seem to work on mobile. 

Thanks for your help !

Robin

@media screen and (max-width:640px) {
label:checked+.ProductList-filter-list {
    display: flex;
}
/* tout */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
  
 }

.ProductList-filter-list-item:nth-child(2) {
    order: 5;
}
  .ProductList-filter-list-item:nth-child(3) {
    order: 6;
}
  .ProductList-filter-list-item:nth-child(4) {
    order: 4;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
  .ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
}

Try this for mobile

@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked ~ ul {
    display: flex !important;
    flex-direction: column;
}
/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
/* Do similar for other items
}

On 4/11/2020 at 10:21 AM, tuanphan said:

Try this for mobile

@media screen and (max-width:640px) {
.ProductList-filter-dropdownToggle-checkbox:checked ~ ul {
    display: flex !important;
    flex-direction: column;
}
/* tour */
.ProductList-filter-list-item:nth-child(1) {
    order: 1;
}
/* vester */
.ProductList-filter-list-item:nth-child(6) {
    order: 2;
}
/* top - chemises */
.ProductList-filter-list-item:nth-child(5) {
    order: 3;
}
/* Do similar for other items
}

 

It did the job ! Thank you so much