Issue with add to cart sticky widget on single product page – not rendering properly.

Hello @Niddy,

Could you please try using the following custom CSS snippet:

@media only screen and (min-width: 768px) and (max-width: 992px) {
.elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et_column:has(.sticky_product_title) {
    display: inline-flex;
    width: auto;
}

.elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .sticky_product_title {
    white-space: nowrap;
    overflow: hidden;
    max-width: 130px;
}

.elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et_column {
    width: auto;
    flex: 1;
}
    .elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et-container {
        max-width: unset;
        width: 100%;
    }
}

Best regards,
8Theme Team

Hello @Niddy
Please, clearify what elements you want to show on mobile and in what order and sizes ?
Kind regards, Jack Richardson
The 8theme’s team

Hello @Niddy
Please, try to add next snippet:

@media only screen and (max-width: 767px) {
.elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et_column {
    justify-content: space-between;
}

.elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et_column .price {
    display: inline-flex;
    flex-direction: row;
}
}

@media only screen and (max-width: 480px) {
    .elementor-widget-woocommerce-product-etheme_sticky_cart .etheme-sticky-cart .et_column .price {
        font-size: 14px;
    }
}

Kind regards, Jack Richardson
The 8theme’s team