How to centralise product image - by vincentdv

Solved1 reply2 participantsUpdated by Rose Tyler

  • Avatar: vincentdv
    vincentdv
    Participant

    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.
    #282277 Copied Theme version: 7.4.2

    1 Answer

    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Try to add this code:

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

    Regards

    #282283 Copied

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