Tablet vs phone mobile view

This is my first website build.  Squarespace makes it really easy, but I've run into an issue.  On mobile view, the images in my online store show up in full view on a tablet/ipad, but on a mobile phone, only the center of the image shows.  How can i fix it to where the whole image shows on a phone screen? 

Can you share link to this product? We can check easier.

https://www.poppopswoodshop.online/products/p/bourbon-flight-1

You can use this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}