[MNM.ca]

Starter Site

www.shop.mnm.ca

This is a starer site so there is no way to change how many categories in one line.

Right now there are 6 categories in one line and I would like to change that to 5.

Can it be done with css?

[MNM.ca]

Anyone on this?

[Elsa Z.]

Hi there,

This is Elsa from Ecwid team. I'm sorry that we missed your ticket in the Forum thread. I'll be glad to assist you now!


If you want to edit the category thumbnails and show 5 categories per row, then please follow the steps:

1. Switch the size of the thumbnails to medium in your design settings.
2. Go to the Ecwid Control Panel > Design> click on Edit theme > Add the CSS code > click on Activate and Save.

@mixin grid-category-settings($count-per-row-list, $max-count-per-row: false) {
    $i: 1;

    @each $count-per-row in $count-per-row-list {

        &:nth-child(n+#{$i}) {

            width: 100% / $count-per-row;

            @if ($max-count-per-row) {

                $scale: $max-count-per-row / $count-per-row;

                $w: min(100%, 100% / $scale * 1.2);

                .grid-category__spacer {

                    $d: 16px * ($scale - 1) / $scale;

                    width: calc(#{$w} - #{$d});

                }

                .grid-category__image-spacer {

                    $d: 16px * ($scale - 1) / $scale;

                    width: calc(#{$w} - #{$d});

                }

            }

        }

        $i: $i + $count-per-row;

    }

}

.ec-size .ec-store .ec-grid .grid__categories {

    &[data-cols="1"] {

        .grid-category {

            @include grid-category-settings(2, 2);

        }

    }

    @for $i from 2 through 10 {

        &[data-cols="#{$i}"] .grid-category {

            @include grid-category-settings($i, $i);

        }

    }

    &.grid__categories--large-items {

        &[data-cols="1"] {

            justify-content: center;

            .grid-category {

                max-width: 480px;

                @include grid-category-settings(1, 1);

            }

        }

    }

}

.ec-size .ec-store .ec-grid .grid__categories {

    justify-content: left;

}

.ec-size .ec-store .ec-grid .grid__categories[data-cols="4"] .grid-category:nth-child(n+1) {

    width: 20%;

}

As it's done 5 categories will be shown per row. See the screenshot in my test store: https://ecwid.d.pr/TTixN9

If you have any questions, please let me know.