Start a conversation

Align price on product cards

Add the below CSS to your Footer Script (Admin panel > Storefront > Footer Script)

<style>
/* align price on product cards */
    .card {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column nowrap;
                flex-flow: column nowrap;
    }
    .card>* {
        width: 100%;
    }
    .card-body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-flow: column nowrap;
                flex-flow: column nowrap;
        -webkit-box-flex: 1;
            -ms-flex: 1 1 0;
                flex: 1 1 0;
    }
    .card-body>* {
        width: 100%;
    }
    .card-text--brand {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
    }
    .card-title {
        -webkit-box-ordinal-group: 3;
            -ms-flex-order: 2;
                order: 2;
    }
    .card-text--summary {
        -webkit-box-ordinal-group: 4;
            -ms-flex-order: 3;
                order: 3;
    }
    .card-text--price {
        -webkit-box-ordinal-group: 5;
            -ms-flex-order: 4;
                order: 4;
        margin-top: auto;
    }
    .mode-1 .card, .mode-bo .card {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-flow: row wrap;
                flex-flow: row wrap;
    }
    .mode-1 .card-body, .mode-bo .card-body {
        display: block;
    }
</style>
Choose files or drag and drop files
Was this article helpful?
Yes
No
  1. Papathemes

  2. Posted

Comments