"The display of the product" (#3635264) / WPClever Support Forum

Comments

Artur started the conversation
1 week ago on April 25, 2024 at 10:20am
Hello, I am sending you two screenshots of the display of the product that is included in the bandles, the first picture is on the computer, the second on the mobile device. How to configure the display of products on a mobile device?
Attached files: Снимок экрана 2024-04-25 в 12.16.34.png
Снимок экрана 2024-04-25 в 12.17.22.png

939

Dustin replied

1 week ago on April 25, 2024 at 10:32am

HI Artur,

Please add below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

@media only screen and (max-width: 767px) {
    .woosb-products .woosb-product {
        flex-direction: column;
        justify-content: center;
    }
    
    .woosb-products .woosb-product > div {
        width: 100%;
        flex-basis: 100%;
        flex: 0 0 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
   .woosb-products .woosb-product .woosb-thumb {
        width: 80px;
        flex: 0 0 80px;
   }
    
   .woosb-products .woosb-product .woosb-thumb img {
        width: 80px;
        min-width: 80px;
        max-width: 80px;
        height: auto;
   }
    
    .woosb-products .woosb-product .woosb-title {
        text-align: center !important;
    }
    
    .woosb-products .woosb-product .woosb-qty, .woosb-products .woosb-product .woosb-price {
        width: auto !important;
        flex-basis: auto !important;
    }
    
    .woosb-products .woosb-product .variations {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 5px !important;
    }
    
    .woosb-products .woosb-product .variations .reset {
        display: none !important;
    }
}

Best regards,
Dustin

1 Like