I need Help

[OLIV1]

I just did an Update From Empire 11 to empire 11.1.3

and previously Like this the collection List

and Now its look like this

Can someone help me how to fix this please

Please

[Guleria]

Hello @OLIV1 ,

I think you need to copy the changes from the previous theme to this one.

Please share the preview of both themes.

Regards
Naveen

[tim_tairli]

So, instead of 5 columns you want to have 10?

Add this code to this sections “Custom CSS” setting:

.collection-list__content {
  grid-template-columns: repeat(10, minmax(auto, 1fr)) !important;
}

Benefit of using “Custom CSS” rather then editing theme code (like .css files) is that this setting will stay with theme updates.

[TheScriptFlow]

Hey @OLIV1 ,

I totally understand your concern. Your concern is valid but the main reason of changing the layout of the collection is due to adding the custom code.

When you add a custom code in the theme file and when the theme update then it remove the all custom coding that you add. So know you need to check which custom code you add in the non-updated theme.

So you need to copy from there and need to paste in the updated theme.

For this you can hire Shopify Dev like me of you can find from the Shopify Experts.

Thanks

[OLIV1]

Tim Thanks a lot for solving my problem. I put the code in and it works . Thank you

[OLIV1]

Dear Tim

I am doing your advice on the desktop version

but now the mobile version is messed

How Can I fixed it ??

[tim_tairli]

If mobile version worked fine for you before, let’s change my code to work on desktop only:

@media only screen and (min-width: 860px) {
  .collection-list__content {
    grid-template-columns: repeat(10, minmax(auto, 1fr)) !important;
  }
}

I’ve wrapped the initial rule with media-query to only apply this rule when condition ( here it is min-width: 860px) is fulfilled.