How to fix image ordering and zoom issues on product page?

Inside the admin Product page, I have the images of the products in the correct order.

But on my store, the image order on the product page is not the same.

For example, in this link:

https://www.passionprintz.in/products/dogs-make-me-happy-you-not-so-much-t-shirt-male-1

The picture of the model is supposed to be the first image and the plain black t-shirt is supposed to be the 2nd image. This is how I have ordered the images in the admin product page for all my products.

But the order in the live store is not the same.

Also, on mobile, when clicking on the product image, the zoom of the image is too much. Is there any way to make it so the image isn’t zoomed too much in? This issue is occurring in both Desktop and Mobile versions.

Store URL: www.passionprintz.in

Thanks in advance!