How to display all collections (7) in a single row on a collection list?

[Mitch23]

Hi,

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

Could I also please get it to be 100% of the width of the screen.

https://omb20wivyok7drxu-55570858102.shopifypreview.com

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the styles.css file.

@media only screen and (min-width: 1024px) {
  .shopify-section.shopify-section--collection-list .container{
    flex-wrap: nowrap !important;
  }
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[LuffyOnePiece]

Hi @Mitch23 ,

Add below css in styles.css file.

@media only screen and (min-width: 1024px) {
    .shopify-section--collection-list div.container {
        flex-wrap: nowrap;
    }
}

Thank you

[Dan-From-Ryviu]

Hi @Mitch23

You can do that by adding this code to theme.liquid file, after in Online Store > Themes > Edit code

[BSSCommerce-HDL]

hi @Mitch23

1. Go to online store → Themes → Edit code, find file name styles.css

2. Find this code in the file: (this code makes the container divided in 5 columns cause it calculate width 100/5 = 20%)

.one-fifth {
  width: calc(20% - 20px);
}

3. Change it to this (because 100/7 ~ 14)

.one-fifth {
    width: calc(14% - 20px);
}

add “!important” if this code not work (“width: calc(14% - 20px) !important;”)

The result will be like

Hope this can help you

Kind regrade

[Mitch23]

This worked but how do you get it to take up the entire screen width?