On the staging site, the CART page body has 2 columns.
The leftmost column has Product & Total info.
And the right column has Basket/cart info.

The live site Cart page body has one wide column:
At the top is the Product info, in tabular format
and beneath it is the Basket/cart info.

How do I change between the two formats?
(I don’t remember having created a new template)

Any alternative suggestions would be greatly appreciated too.

Also apologies if this is the wrong place to post this

Thanks

https://drive.google.com/file/d/1kNzIUVujB-ZdkFDwzNQwKe3oQS1PaNLE/view?usp=drivesdk

as per the topic: remove product description on cart and checkout pages.

what would be the best way / css code to have this done so it looks alot neater?

cheers

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.

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?

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