Help with Altitude Pro: cart and checkout width and wrapping issues on mobile

[arhyarion]

Good morning,

I just noticed that on mobile devices there are issues on the View Cart and the Checkout pages. I could use some help fixing these.

Problem 1: In both portrait mode and landscape mode on mobile devices: Product names that exceed the width of a single line are broken mid-word, rather than keeping words intact.

Problem 2: In both portrait mode and landscape mode on mobile devices: On the View Cart page, when long product names exceed the width of a single line, the next line is right-justified rather than left-justified.

Problem 3: In portrait mode on mobile devices: On the View Cart page, the Apply Coupon button is not responsive enough to move

below

the coupon field, and it results in more strange word wrapping for the word "coupon". Note: This can actually be seen in StudioPress's live demo of the Altitude Pro theme, so it's not limited to our setup.

Problem 4: In both portrait mode and landscape mode on mobile devices: On the Checkout page, long product names in general seem to be pushing the column width over, and it results in the word "Subtotal" and the prices being squashed to accommodate it.

screenshots included.

Any assistance would be most appreciated.

Thanks,
Ben

http://staging6.bsmclient.com

[arhyarion]

image links didn't work properly :-/

https://imgur.com/clT330b
https://imgur.com/8a2Zees
https://imgur.com/ROHo8j6

[arhyarion]

I received a reply from StudioPress that resolved these problems for me.

They sent me the following code to add to my Additional CSS:

.product-name {
    word-break: normal;
}

@media only screen and (max-width: 768px) {
.woocommerce-page table.cart td.actions .coupon .button {
width: 100%
   }
}

This resolved the issue with words breaking in the middle, and the Apply Coupon button. It did not fix the problem with the Subtotal column and the prices.

However, I modified one of the pieces of code they sent to the following:

.product-name {
    word-break: normal;
    width: 65%;
}

Making the product name a bit narrower fixed the formatting for the other column.

So that being the case, these specific issues are resolved. Sharing the solution so that hopefully others might benefit.

[Author]

Posts