Collection list items

Shopify Partner
70 0 10



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 


Password: sasa


Thank you in advance !


Replies 3 (3)

Shopify Partner
31 2 4


.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.

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>

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




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.

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 😞