CSS Styling for Mobile View & Add Custom HTML

Hi,

How do I select and adjust each element’s CSS styling for the mobile view? As you can see in my attached image, the only element that barely responsive is the image element in both “Order detail” and “Products” components that stretched to 100% within the container. I’ve tried to inspect the element and select it at the custom CSS editor, nothing changed.

The plugin I’m using now is version 1.0.1.6, test mail viewed in Gmail app.

Things I want to achieve are:
1. Adjust the product image size in mobile view.
2. Adjust the font size and padding of the product name & price generated below the images in mobile view.
3. Adjust the font size and padding of the billing address and shipping address, as the two columns are stacking in mobile view, but the texts are neither responsive nor fit to the container. Same goes to the component above.
4. Adjust the text-align to center in mobile view of “Horizontal text” template. (like what it shown in mobile view of “Horizontal text” template)
5. Add table header (Product, Quantity, Price like the one in “Default Template”) in desktop view to the “Horizontal text” template that consists of product images in “Order detail” Component, hide them when viewed in mobile view.

Overall, I need to style each element separately for both desktop and mobile view.

Cheers,
Eric