WPClever Support Forum

Comments

1
Emeline started the conversation
August 26, 2022 at 4:54pm
hi, no amount of setting changes this problem, the bundle list is displayed perfectly fine on computer screens, but is cut off on the right hand side of mobile phone. I have tried to set a side bar, display wide or boxed, removing thumbnails, etc... nothing moves the price's position.
we are using avada builder for the themes and rest of the site.
Mostly it would be nice to be able to see the prices of each variation fully and or have them displayed under each title without having to pivot the phone to landscape (for our customers) -
could texts be made smaller?, spacing between quantity buttons and prices smaller too?
Many thanks in advance for helping
767
Janilyn replied
August 29, 2022 at 10:27am
Hi Emeline,

Thanks for contacting WPClever Support Forum. We're not available at the weekends so today (Monday) I am able to process your ticket.

We can help you fix this with some custom CSS codes. However, we need more information in order to help you with the custom codes. Please provide us with a link to your published product for checking?

We need to check the frontend in order to provide the proper CSS code for your needs.

After receiving your information, I'll proceed to the next step.

Best regards.

Janilyn T. - WPClever Support Agent
1
Emeline replied
August 29, 2022 at 10:57am
many thanks Janilyn, here is the page’s link :https://projectfashion.ie/product/materials-starter-kit-1-preorder/
Hope custom CSS can help with this issue

best regards
767
Janilyn replied
August 29, 2022 at 11:18am
Hi Emeline,

Thank you for the link. I have assigned one of our developers to help you with that.

He’ll be looking into your question and responding with specific instructions as soon as possible.

Please stay patient as we're having very heavy workloads, it might take some time for our developers to reach back.

Best regards.
Janilyn T. - WPClever Support Agent

153

Henry replied

August 30, 2022 at 1:37am

Hi,

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

/* Wpclever team support ticket-3112572 */
@media (max-width: 414px ) {
    html:not(.avada-has-site-width-percent) #main {
        padding-left: 15px;
        padding-right: 15px;
    }
    .single-product .woosb-products .woosb-product .woosb-price {
        width: initial;
        flex: initial;
        text-align: center;
    }
}

Best regards,
Henry N.

1
Emeline replied
August 30, 2022 at 10:39am
Hi Henry,
Thanks for your code, unfortunately it still has no impact on the bundle list's size. : price is still cut off the side. Could we maybe reduce the bundle list's font size or quantity button size?
I'm attaching a screenshot of the current additional CSS running on the site.
Let me know if you can think of anything else please

153

Henry replied

August 31, 2022 at 12:36am

Hi,

You can use the below CSS code to WP-Admin → Appearance → Customize → Additional CSS:

/* Wpclever team support ticket-3112572 */
@media only screen and (max-width: 414px) {
    .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;
    }
}

It is like this: https://www.screencast.com/t/W1hMlTPUE3

Best regards,
Henry N.

1
Emeline replied
August 31, 2022 at 10:21am
Hi Henry,

Amazing! it works now, perfectly centered on phone screens. Thank you so much for this very long code.
Great support,
many thanks again and Best regards!
1 Like
153
Henry replied
August 31, 2022 at 3:20pm
If you need help from us at any time, feel free to reach out to us. We are always ready to help.
Best regards,
Henry N.