How can I align collection list items in one line on desktop view?

Store Design
, , , ,
1

Hi,

I have 7 items in my collection list, the last one is alone in its line, also for Desktop (one line of 6 icons and 1 alone) or mobile (2 lines of 3 and 1 alone). How can I add it to the upper line for Desktop ? - I want all 6 to be in the same line for desktop

Daniel19901_0-1703021674127.png
Daniel19901_0-1703021674127.png1787×842 139 KB

https://pferdinand.myshopify.com/

Password: sasa

Thank you in advance !

2

CSS

.collection-list__item {
  display: flex;
  flex-wrap: nowrap; /* Desktop: no line breaks */
}

@media only screen and (max-width: 768px) {
  .collection-list__item {
    flex-wrap: wrap; /* Mobile: allow two lines */
  }
}
3

Hi @Daniel19901

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1703034498225.png
PageFlyRichard_0-1703034498225.png1326×953 185 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

@PageFly-Richard thank you so much! it almost worked. Desktop seems to be perfect now, but mobile is not 3 in each row :disappointed_face: