Please submit a private ticket if you need to share sensitive information, such as license details and admin credentials.

Okay
  Public Ticket #2593033
Responsive view problem
Closed

Comments

  • Nicola started the conversation

    Hi

    I'm looking at purchasing the WPC Product Bundles plugin to use for our variable products. However when I view your demo version on my mobile it makes it incredibly hard to read the text in the drop down boxes, as it is very narrow and the words are displayed vertically! (By the way this can't be recreated by making the browser on a desktop narrow, it needs to be viewed on a mobile phone in portrait mode).

    Is it possible to have the product title, variable options, quantity selector & price in a single column so they sit in a list, rather than side by side in one row? I think this might give the text more space so it's more user friendly.

    Thanks in advance.

  • Nicola replied

    Screen grab attached.

  •  767
    Janilyn replied

    Hi Nicola,

    Thanks for contacting WPClever Support Forum. We've had a short vacation so today I am able to process your ticket.

    I've checked this issue on the mobile devices and will report this to our developers for making improvements in the future updates.

    For your information, if you purchase the Premium version of our plugin, our developers can investigate the settings of your site (WooCommerce, WordPress page builder, theme/template... ) and customize the layout/appearance to your preferences. 

    If we couldn't make you satisfied, we will give you a full refund of your purchase back. Kindly contact us within 7 days after your purchase and make the request so we can conduct the services for your site.

    Best regards. 

    Janilyn T. - WPClever Support Agent

  •  1,226
    Dustin replied

    Hi Nicola,

    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-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;
        }
    }

    And the result https://www.screencast.com/t/F7ma3Dcx7Fab

    Best regards,
    Dustin

  • Nicola replied

    That's great thanks, that's fixed it. I've just purchased the plugin. :)

  •  1,226
    Dustin replied

    Thank you so much! <3

    If you are satisfied with our plugin and support, please reward it with a full five-star ★★★★★ rating. https://wordpress.org/support/plugin/woo-product-bundle/reviews?rate=5#new-post
    Thank you in advance!

    Best regards,
    Dustin