Collection list items

Daniel19901
Shopify Partner
70 0 10

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

 

 

https://pferdinand.myshopify.com/

Password: sasa

 

Thank you in advance !

 

Replies 3 (3)

joehustle
Shopify Partner
31 2 4

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 */
  }
}
- If this is helpful pls Like and Accept a solution.

Click here to Whatsapp me.

PageFly-Richard
Shopify Partner
4050 903 1556

 

Hi @Daniel19901 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> 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 </head>

<style>
@media screen and (min-width: 767px){
#shopify-section-template--16243317964973__614ebfdf-ee8c-42d8-85dd-c84c0358c23d .new-grid {
    flex-wrap: nowrap;
}
}

#shopify-section-template--16243317964973__614ebfdf-ee8c-42d8-85dd-c84c0358c23d .new-grid .grid-item {
    flex: 0 0 calc(100%/7);
}

</style>

PageFlyRichard_0-1703034498225.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Daniel19901
Shopify Partner
70 0 10

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