Transition to flexbox in product listing grids

Transition to flexbox in product listing grids

30. 7. 2020
Shoptet Frontend news

In the coming days, a CSS change in templates Tango, Waltz, Classic and Step concerning the .products-block grid component will be released. Flexbox will be used to a greater extend instead of JavaScript for calculating height of product cards. Until now, templates Techno, Classic and Step used JavaScript to set height of product cards (.products-block .p elements) according to the highest card in the grid. After the change, this will apply only for the Techno template.

Below are all CSS changes for each template. There are only additions, no code is removed (apart from the fact that JavaScript function for setting height is not called anymore as mentioned).

Tango template

.products-block .product .inner {
    text-align: center;
    padding: 20px;
+   height: 100%;
}

Waltz template

+ .products-block {
+   display: flex;
+   flex-wrap: wrap;
+}

Classic template

.products-block .p {
    display: flex;
    flex-direction: column;
    position: relative;
+   height: 100%;
}

Step template

+.products-block {
+   display: flex;
+   flex-wrap: wrap;
+}
.products-block > div .p {
    display: flex;
    flex-direction: column;
    text-align: center;
+   height: 100%;
}

Post navigation