How can I decrease product image size on custom single column product page layout

I have successfully input code to change product page to a single column (rather than the standard minimum two) but the product images are filling to the edge of the page/inset margin. I would like to decrease the size of the image. 

bethiewilliams.art

Password: Bethie2023

Thank you in advance!

Try this Custom CSS:

.products.collection-content-wrapper .products-flex-container {
    max-width: 600px;
    margin: auto;
}

Thank you! This worked to increase the margins on either side like I was hoping, but unfortunately now the previous piece of code to override the settings and allow just one column isn't working. 

This was what I was using. 

@media screen and (min-width:768px) {
.products.collection-content-wrapper .list-grid {
    grid-template-columns: repeat(1,minmax(0,1fr)) !important;
}
}

Is there a way to make them work together?

Thank you!