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

Comments

Artur started the conversation
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?

1,688

Dustin replied

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