• Resolved khahina

    (@khahina)


    hello,
    i did’nt see the ask in forum.

    In products blocks (like advanced-product-2/#product-73, but also the other inline one) , the add-to-cart buttons are not align on the row bottom.

    Did we need add some css to do the block work in the elegant way ?

    Thank you

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor codersantosh

    (@codersantosh)

    Hello @khahina ,

    Here is demo of Gutentor WooCommerce . I hope it will help you.
    If you can send a screenshot or URL of your page, it will be easy to understand.

    Best Regards!

    Thread Starter khahina

    (@khahina)

    hye,
    here with gutentor block :
    https://snipboard.io/m4ZDig.jpg
    bottom not align

    here with woocommerce shortcode :
    https://snipboard.io/uNfy4L.jpg
    bottom align and elegant

    Plugin Contributor codersantosh

    (@codersantosh)

    Hello @khahina ,

    Here is the base CSS for your requirements

    .gutentor-post-item {
        height: 100%;
    }
    .gutentor-post-module .gutentor-post-item > :nth-last-child(2) {
        margin-bottom: 63px;
    }
    .gutentor-post-module .gutentor-post-item > :last-child {
        position: absolute;
        bottom: 0;
        max-width: 77%;
    }

    I recommend adding some unique selector using Additional Class or Block ID.

    Best Regards!

    Thread Starter khahina

    (@khahina)

    Hye
    thank you for show me the way.
    Some adjust are necessary but it’s work

    .grid-row {
        margin-right: 0px; 
         margin-left: 0px;}
    .gutentor-post { margin-bottom:15px;
            width: calc(100% - 30px);
    }
    
    .gutentor-post-item {
    height:100%;
    }
    .gutentor-post-module .gutentor-post-item > :nth-last-child(2) {
        margin-bottom: 200px; /* adjust with elements set like star or not, cat or not */
    }
    .gutentor-post-module .gutentor-post-item > :last-child {
        position: absolute;
        bottom: 0;
    width:90%;  
    }
    .gutentor-post-item .gutentor-post-title, .gutentor-post-item .gutentor-post-title a  {position:relative;text-align:center;}
    .gutentor-post-item .gutentor-post-title a, .gutentor-post-item .gutentor-wc-price, .gutentor-post-item .gutentor-post-desc, .gutentor-post-item .gutentor-categories {position:relative;text-align:center;}
    .gutentor-fp-wc-rating .star-rating, .gutentor-wc-rating .star-rating
    {position:relative;text-align:center;margin:auto;}
    .gutentor-post-item .gutentor-woo-add-to-cart {position:relative;text-align:center;}

    and yes need to set .{{gBlock}} before each selector

    Thank you for the help

    Plugin Contributor codersantosh

    (@codersantosh)

    @khahina happy to know the issue has been resolved ?? Thanks for explaining more.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘add-to-cart button not align on bottom’ is closed to new replies.