Mobile appearence

  • Hello,

    The visual layout on mobile for this plugin is not very optimized to modern standards. Each element is shown on its own line, meaning that if you have just a few bought-together items, it will take up the entire mobile phone screen.

    How do I make the checkbox, image, title, text, price appear on ONE line? Like f.x composite product on mobile phone?

Viewing 1 replies (of 1 total)
  • Plugin Author WPClever

    (@wpclever)

    Hi @nkapteina

    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;
    }
}
Viewing 1 replies (of 1 total)
  • The topic ‘Mobile appearence’ is closed to new replies.