Catalog products are not aligned. - by HmirceaD

This topic has 5 replies, 3 voices, and was last updated 4 years, 8 months ago ago by HmirceaD

  • Avatar: HmirceaD
    HmirceaD
    Participant
    April 2, 2021 at 11:25

    Hello,

    Some of the products in my store have different lenght names (some take 1 line to write, some 2 or 3). Is there a way I can make it so they all align?

    Here is the screenshot from my store:
    https://imgur.com/a/29KnH7c

    And here is a screenshot of the result I want. In this store, the products are always aligned no matter what the length of the text is.
    https://imgur.com/a/oQtjeef

    Please, contact administrator
    for this information.
    4 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2021 at 11:39

    Hello,

    Add the next code in Theme Options > Theme custom CSS:

    .main-products-loop .product, .products-loop .product, .carousel-area .product-slide .product {
        display: flex;
        justify-content: center;
    }
    .products-loop .ajax-content, .products-loop {
        display: flex;
        flex-wrap: wrap;
        flex: 1;
    }
    .content-product {
        flex-direction: column;
        justify-content: space-between;
        display: flex;
        flex: 1;
    }
    .content-product .quantity-wrapper {
        margin-right: auto;
        margin-left: auto;
    }
    .swiper-container {
        display: flex;
        align-items: stretch;
    }
    .product-slide .product {
        display: flex;
        height: 100%;
    }
    .swiper-wrapper {
        height: auto;
    }

    Regards

    Avatar: HmirceaD
    HmirceaD
    Participant
    April 2, 2021 at 13:37

    Hello,

    I’ve added the code but it still does not align. I attached a screenshot:
    https://imgur.com/a/0vjep98

    Avatar: Olga Barlow
    Olga Barlow
    Participant
    April 2, 2021 at 14:43

    Hello,

    Add the below code in addition

    @media only screen and (min-width: 993px){
    .products-list .content-product {
        display: flex;
        flex-direction: row;
    }
    
    .products-list .product-details {
        display: flex !important;
        justify-content: space-between;
        flex-direction: column;
    }
    }

    Regards

    Avatar: HmirceaD
    HmirceaD
    Participant
    April 3, 2021 at 07:19

    Works now, thank you very much!

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Catalog products are not aligned.’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.