Mobile Checkout Formatting

Support
#1

Hi,

On mobile the full checkout page does not display unless the phone is turned horizontal (www.economycandy.com). Instead of it scaling down/reformatting in any way the page is just cut off and there is no option to scroll to see the full page. Is there code i can add to fix this formatting issue?

Thank you,

Skye

#2

Hi Skye,

I tried checking the checkout page of your site and it seems to be displaying fine.

Would you mind trying to clear the cache of your phone browser and provide us some screenshot if the issue persists?

Thank you.

#3

Hi,

I’m sorry, it’s specifically the cart page that is having the issue.

Thank you,

Skye

#4

Hi,

To make it scroll, you can add this in X > Launch > Options > CSS

@media (max-width: 767px) {
.woocommerce-cart div.woocommerce {
    overflow-x: scroll;
}
}

Hope that helps

#5

Thanks so much, that did the trick. Is there anyway to make it so that the picture of the product and/or product name shows up? Ideally we’d like the whole page scales down to make scrolling to the side unnecessary, is that possible?

#6

Hi Skye,

Please remove this:

@media (max-width: 767px) {
.woocommerce-cart div.woocommerce {
    overflow-x: scroll;
}
}

Then use the CSS suggested here: https://gist.github.com/catchthemes/eec48957fbd3ed724c98
Make sure to copy all that CSS correctly. Result will be something like this:

Hope this helps.

#7

It does, thanks so much for your help!

#8

You’re most welcome.