Layout mobile

Resolved Bruno
(@djbrunolima)

5 years, 7 months ago

Hi guys!
The layout of products in the mobile version is very large. before it was displayed same the desktop version. Now, they are in mobile centered with the photo in one line, product name in another line and the price in another line. This takes up a lot of space and makes the customer give up on scrolling the page.
Can you go back or put the option to use the same desktop layout on mobile version too?

thks,

Viewing 4 replies - 1 through 4 (of 4 total)

Plugin Author

WPClever

(@wpclever)

5 years, 7 months ago

Hi @djbrunolima

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

@media only screen and (max-width: 767px) {
    .woobt-products .woobt-product {
        display:flex;
        flex-direction: row;
        text-align: left;
        padding: 0 !important;
    }

    .woobt-products .woobt-product>div {
        padding: 10px 10px 10px 0 !important;
        width: auto !important;
        flex-basis: auto !important;
        max-width: 100% !important;
    }

    .woobt-products .woobt-product>div:first-child {
        padding-left: 0 !important;
    }
    
    .woobt-products .woobt-product>div:last-child {
        padding-right: 0 !important;
    }

    .woobt-products .woobt-product .woobt-thumb {
        text-align: left;
        width: 50px;
        flex-basis: 50px;
    }

    .woobt-products .woobt-product .woobt-thumb img {
        width: 50px;
    }

    .woobt-products .woobt-product .woobt-price {
        width: auto;
        flex-basis: 0;
    }

    .woobt-products .woobt-product .woobt-thumb img {
        display: block;
        margin: 0 auto;
    }

    .woobt-products .woobt-product .variations_form .variations {
        display: block;
    }

    .woobt-products .woobt-product .variations_form .variations .variation {
        max-width: 100%;
        margin-right: 0 !important;
    }

    .woobt-products .woobt-product .variations_form .variations .variation select {
        text-align-last: left;
    }
    
    .woobt-products .woobt-product .variations_form .variations .reset {
        display: none !important;
    }
}

Thread Starter

Bruno

(@djbrunolima)

5 years, 6 months ago

thanks for the answer and the solution!
excellent plugin and excellent support! Congratulations!

BR,