Why are my product images so tiny and related products pictures are HUGE?

Hello, How can I increase the size of my product images on Mobile?

I've been fiddling with code I find online and nothing seems to work. I would like them to remain the correct ratio if possible--just not so tiny.

then scroll down and it looks like this:

Can you share link to shop page? We can check easier

https://www.tylerhorton.photography/portfolio

Try adding to Design > Custom CSS
 

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item, section.ProductItem-gallery {
    overflow: visible !important;
    height: auto !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 150% !important;
}
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    height: auto !important;
}
}

@tuanphan Thank you! That was VERY helpful.

I altered the code slightly and this is a HUGE improvement!

@media screen and (max-width:767px) {
.ProductItem-gallery-slides-item, section.ProductItem-gallery {
    overflow: visible !important;
    height: auto !important;
}
.ProductItem-gallery-slides:before {
    padding-bottom: 75% !important;
}
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
    height: auto !important;
}
}