Image re-size on product and category pages

I have followed the template set-up instructions and calculated my image adjustment percentage.
My images are 800x600 which will = 75% as the adjustment number.
I have pasted the following into the Custom Head Style box in theme settings.  

.product-grid .item-box .picture > a:before {
padding-top: 75%;
}

This does not seem to be adjusting anything.
You can visit the site at http://90degreeofficefurniture.com/.

What do I need to do to adjust images to a 4:3 ratio?  All of my images will be horizontal and the same ratio.

Hello,

From what I see on your website the images on the home page ratio is width to height 4:3. Which means the effect you are trying to accomplish works. The difference between square and 4:3 images is not very visible especially if the images are not large, so you can hardly see the difference. If you want to compare, you can rightclick on the image and open your browser inspector. Then if you unclick the padding-top you will see the change. Also your browser may have cached the website styles and did not display the changes. Try clearing your cache and see if the images still look square.  

Thank you for your response.  I know that the home page is working well.  However, the product pages is not.  It look terrible with all of the space above the image and if there are multiple it looks even worse with it above the multiple image strip.

How do you adjust the image here?  It is still accommodating a square image.

Hello,

For the product page you can try adding this code to your Custom Head Styles as you did with the first one:

.gallery .picture:before {
padding-top: 75%;
}
@media (min-width: 1001px){
.gallery .picture-wrapper, .gallery .picture-wrapper > .picture {
line-height: 375px;
}