The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 10-04-2019, 02:17 AM
MNM.ca's Avatar
MNM.ca is offline
 
Join Date: Jun 2015
Posts: 118
Default

Change categories from 6 to 5 on starter site


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?
  #2  
Old 10-09-2019, 03:12 PM
MNM.ca's Avatar
MNM.ca MNM.ca is offline
 
Join Date: Jun 2015
Posts: 118
Default

Anyone on this?
  #3  
Old 10-10-2019, 03:24 PM
Elsa Z.'s Avatar
Elsa Z. Elsa Z. is offline
Ecwid Team
 
Join Date: Dec 2018
Posts: 28
Default

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.

HTML Code:
@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.
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:53 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.