How to centralise product image - by vincentdv

This topic has 2 replies, 2 voices, and was last updated 4 years, 2 months ago ago by Rose Tyler

  • Avatar: vincentdv
    vincentdv
    Participant
    April 2, 2021 at 12:11

    Hi good day.

    As attached screenshot, may I know how can I only centralise image of certain products in shop page? I would like to centralise to middle image.


    I have pasted code below as i found from another thread. then I would like to centralise images of a few items only. Is this possible?

    .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;
    }

    Please, contact administrator
    for this information.
    1 Answer
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    April 2, 2021 at 12:42

    Hello,

    Try to add this code:

    .content-product .product-image-wrapper {
        display: flex;
        align-items: center;
        min-height: 300px;
    }

    Regards

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

The issue related to '‘How to centralise product image’' has been successfully resolved, and the topic is now closed for further responses

Helpful Topics

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