Cart Page redesign problems with styling and auto-rotate with iPhones

Hi there so as you can see from my cart page in the link I have provided. You’ll obviously need to go add a product which you can do here – https://jack.idwithin.xyz/product/sodom/

As you can see I have changed the style and have also been changing things like the widths of the columns to get the design we want. So, I am wondering if my two problems might be connected.
For desktop and tablet. I controlled some of the widths of the th and tds to get the design I wanted. I think for the large desktop sizes and tablet I mostly controlled the widths of th.product-thumbnail th.product-name and th-product-remove. Squashing in the others to fit the client’s designs
It didn’t start to get hard until I got down to mobile widths and trying to change the column widths here go tricky as you remove the header as part of responsiveness so I had to display it again. Then hide the new pseudo-element titles etc. As we want the table design throughout responsiveness. As you can see, I am very close but trying to adjust the widths. The th’s give off a different length the td’s. And it’s been very hard to style mobile. Is there a reason for this? Even though I make th.product thumbnail Xpx or X%. – below it td.product-thumbnail gives off an entirely different width (usually bigger) even though they are matched.

So my first question is, is there an easier way to control the table and create the design I want for mobile or am I going to have to try something else? As it’s been really hard to redo it with CSS and overwrite your original styles.

Another problem I have noticed, and I think it’s only happening on iPhone’s. As I’ve tested it on Android and it’s fine. Yet on my clients iPhone X and iPhone 11 XL the glitches happen there.

It is to do with the auto rotate feature on phones. When you turn it to landscape it seems to sort itself out fine. Yet when you turn it back to portrait the code is all scrambled and messy. What could be causing this? Is this something different? Or might this be related with how I’ve tried to change and manipulate the tables to look like the clients designs?

https://ibb.co/KKVZpWN – Before on portrait everything is okay

https://ibb.co/h8tFThQ – Auto rotate to landscape everything is still okay.

https://ibb.co/wpWRcW0 – rotate back to portrait. It is all messed up.

Thanks for your time, and I hope I have explained my problems well enough. I have attached images of how the auto-rotate can mess up the design.

The page I need help with: [log in to see the link]