Return to previous page

Blanco 3.5 on Mobile - by Michael - on WordPress WooCommerce support

This topic has 6 replies, 3 voices, and was last updated 8 years, 10 months ago ago by Jack Richardson

Michael

Participant

February 19, 2016 at 11:06

Hi,
I thought I had raised this a day or two back but can’t find it as a topic so am resubmitting it – sorry if it’s in the system already.

Using Blanco 3.5 on my Nexus 5 there seems to be a couple of issues when viewing the checkout page.

(1) The line ‘Cost before shipping:’ is on the left and the price for it is on the right – a long long way away. Can the price be moved so that it is straight after ‘Cost before shipping:’?

This would have the following benefits :-
(a) The price would be visible on a mobile without the need for scolling left/right. Also, on a large screen it does look a bit odd have it spaced so widely.
(b) The ‘Cost before shipping:’ line would be consistent with the Total Shipping and Total Price layout. Also removing the underline/bottom-border and excess space below ‘Cost before shipping:’ would improve the appearance. That way all totals are together and consistent.

(2) The product table is no longer responsive on my mobile. To see the full products table you now need to scroll left/right. Thats a problem because it’s not responsive which it used to be but it’s mostly a problem because there’s no visible indicator on my mobile that there is actually a scrollable section. Consequently this may confuse/concern customers – they may not realise they can scroll that part of the screen. They may therefore think they cannot review the product pricing or change a quantity and as noted in (1) cannot see the cost before shipping amount.

Thanks,
Mike.

#113824 Copied Theme version: 3.5

5 Answers
Eva Kemp

Support staff

February 22, 2016 at 13:16
Hello,

1. That section is created as table and price can’t be moved. That’s why it was made scrollable.

2. To show scroll permanently I’ve added this code in your custom.css file:
```
.checkout-table-wrapper::-moz-scrollbar {
        width: 10px;
        height: 6px;
}
 .checkout-table-wrapper::-webkit-scrollbar {
        width: 10px;
        height: 6px;
}

 .checkout-table-wrapper::-moz-scrollbar-button:start:decrement,
    .checkout-table-wrapper::-moz-scrollbar-button:start:decrement {
        height: 0px;
        display: block;
        background-color: black;
}
.checkout-table-wrapper::-webkit-scrollbar-button:start:decrement,
    .checkout-table-wrapper::-webkit-scrollbar-button:end:increment {
        height: 0px;
        display: block;
        background-color: black;
}
.checkout-table-wrapper::-moz-scrollbar-track-piece {
        background-color: #3b3b3b;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
}
.checkout-table-wrapper::-webkit-scrollbar-track-piece {
        background-color: #3b3b3b;          /*Global Track Peice(the slider noob.)*/
        -webkit-border-radius: 6px;
}
.checkout-table-wrapper::-moz-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #666;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
}    
.checkout-table-wrapper::-webkit-scrollbar-thumb:vertical {
        height: 50px;
        background-color: #666;            /* Up/Down slider background*/
        -webkit-border-radius: 6px;
}
.checkout-table-wrapper::-moz-scrollbar-thumb:horizontal {
        width: 50px;
        background-color: #666;            /* Side/Side slider background*/
        -webkit-border-radius: 3px;
}    
.checkout-table-wrapper::-webkit-scrollbar-thumb:horizontal {
        width: 50px;
        background-color: #666;            /* Side/Side slider background*/
        -webkit-border-radius: 3px;
}
```
Please check the Checkout page on mobile now.

Regards,
Eva Kemp.
#114181 Copied
Michael

Participant

February 24, 2016 at 10:55

Hi Eva,
The scroll bar appears on my Nexus 5 mobile so thats a big help, thanks.

With regards to the CSS you provided is it all to do the scroll bar or does it do others things as well, I only ask as it’s very long?

Regards,
Mike.

#114561 Copied

Eva Kemp

Support staff

February 24, 2016 at 11:14

Hello,

Yes, the whole code is related to scroll bar.

Regards,
Eva Kemp.

#114569 Copied

Michael

Participant

February 24, 2016 at 23:31

Hi Eva,
Thanks. Please go ahead and close this topic.
Regards,
Mike.

#114715 Copied

Jack Richardson

Support staff

February 25, 2016 at 08:31

Hello,

You’re welcome.

Best regards,
Jack Richardson.

#114736 Copied
Tagged: blanco, mobile, responsive, themes, woocommerce, wordpress
Viewing 6 results - 1 through 6 (of 6 total)