Hello – I’m once again suddenly having issues with the “cart totals” table on the cart page. The right column (showing the shipping options, subtotal, etc.) is suddenly too small, and the options are not showing on a single line. For example, it looks like:
Priority Mail
Express – $7.50
The left column of the table (with the “shipping” text) is clearly much larger than it needs to be, and if it were smaller the information in the right column would fit on one line. Is there a simple way to change the width of the right column so that it is responsive and always the correct size to fit items on a single line, eg. –
Priority Mail Express – $7.50
– and just push the left column over when necessary?
Thank you! That didn’t do it initially, but I adjusted it to width:70%; font-size:14px;
and that is now working for laptops/tablets.
However, it’s still scrunched up for mobile devices, which makes the UX really unpleasant. Most of our customers are visiting us on their mobile devices, so it’s imperative that the checkout experience be simple and easy to read – which it isn’t right now. Is there any way to make the cart table responsive, so that the column widths and/or font size adjusts for mobile devices depending on the screen size? We need each line (shipping options, address, etc.) to appear on one line only.
We do have this other custom CSS already, in case that is causing conflict:
I checked it on the mobile and looks good. I can’t find for example an address row there. Please can you send me a screen image so I can better understand which section to fix?
Yes, I’m talking about the cart totals (specifically, the right column of the cart totals table). In the cart page if you click on “calculate shipping” to add an address, or if someone is visiting the site again after purchasing in the past and their address is automatically populated, then the shipping options and shipping address appear – and they don’t fit. It appears that there’s a wide margin to the left and right of the cart totals table – if that were reduced, I imagine that could help.
Ludjon – I’ve been testing this on my Pixel smartphone, so it’s’ definitely a small device. I definitely cleared the cache before testing. I tried adding !important and that didn’t help.
I’ve updated/refreshed the staging site so you should be able to login with the credentials now. Thank you!
Ludjon – I’ve cleared the cache and checked on two different devices (I’m checking the /wp-staging site, which is where I’m assuming you made the changes) and the lines are still broken up even when there’s not a lot of text. Can you send me a screenshot of what it looks like when you test it (and feel it looks great), so I can make sure I’m clearly communicating?
