Product Slider / Add to cart with price and name button aligned without the staircase effect

This topic has 9 replies, 3 voices, and was last updated 3 months, 1 weeks ago ago by Andrew Mitchell

  • Avatar: Kombajn88
    Kombajn88
    Participant
    March 12, 2024 at 22:34

    Hello,
    Thank you in advance for your help!

    I tried to use the code from this topic, but unfortunately it didn’t work, the problem is identical to the topic – steps with title, price, product name, picture

    I would like each (add to cart, product name, price, category) to be in the same row regardless of the photo. The problem exists in sliders and carousels

    topic: https://www.8theme.com/topic/product-slider-add-to-cart-button-aligned-without-the-staircase-effect/

    css from topic:

    .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.
    Files is visible for topic creator and
    support staff only.
    8 Answers
    Avatar: Justin
    Luca Rossi
    Support staff
    March 13, 2024 at 10:34

    Dear @Kombajn88,

    We hope this message finds you well.

    We are pleased to inform you that we have implemented the following custom CSS to enhance the presentation of the product grid on the homepage:

    
    .home .etheme-product-grid-title {
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    
    .home .etheme-product-grid-image img {
        min-height: 173px;
        width: auto;
    }
    

    This adjustment ensures that the products are now properly aligned. We kindly request that you review the changes at your earliest convenience.

    For your reference, here is a screenshot of the updated layout: https://prnt.sc/HDpVCzQ-GLG4

    Should you have any further questions or require additional assistance, please do not hesitate to contact us.

    Best regards,
    The 8Theme Team

    Avatar: Kombajn88
    Kombajn88
    Participant
    March 15, 2024 at 13:56

    Thank you very much, that’s exactly what I meant!

    I can see the css is global, but it doesn’t work on the give page in private content unfortunately. I tried adding it individually to the page, but it doesn’t do anything. Strange because it is the same widget on both pages.

    Please contact administrator
    for this information.
    Avatar: Kombajn88
    Kombajn88
    Participant
    March 15, 2024 at 14:03

    And also if I could ask to do the same in the store

    Please contact administrator
    for this information.
    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    March 15, 2024 at 14:32

    Hi @Kombajn88,

    We’ve updated the custom CSS codes to this:

    
    .etheme-product-grid-title {
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    
    .etheme-product-grid-image img,
    .content-product .product-content-image img {
        min-height: 175px;
        width: auto;
    }
    
    .products-page-cats {
        min-height: 65px;
    }
    

    Can you please check again?

    Best regards,
    The 8Theme Team

    Avatar: Kombajn88
    Kombajn88
    Participant
    March 15, 2024 at 19:11

    It works almost perfect, unfortunately the product photos stretch a little strangely (vertical I think)

    /on the phone view even stronger

    Files is visible for topic creator and
    support staff only.
    Avatar: Justin
    Luca Rossi
    Support staff
    March 16, 2024 at 07:19

    Dear @Kombajn88,

    We would like to advise you to maintain a consistent image size across all products. We recommend using images with dimensions of 1000×1000 pixels.

    Furthermore, please ensure to delete the following line from your custom CSS code:

    
    min-height: 175px;
    

    Should you require any further assistance, please do not hesitate to contact us.

    Best Regards,
    The 8Theme Team

    Avatar: Kombajn88
    Kombajn88
    Participant
    March 16, 2024 at 18:29

    You guys are awsome, thanks a lot!

    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    March 16, 2024 at 18:29

    Dear Kombajn88,

    In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

    Click here to share your thoughts: https://themeforest.net/downloads

    Being part of our community means a lot, and your feedback contributes immensely.

    Best Regards,
    The 8Theme Team

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

The issue related to '‘Product Slider / Add to cart with price and name button aligned without the staircase effect’' 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.