Sorry for taking so long to respond. That seems to have helped the formatting between desktop and mobile. Here is the test page that I’m working on. The code is at the bottom. http://www.GoutResolve.com/home-test
Here are the tweaks I’m trying to do now.
I’d like to make borders around each of the divs so that each product has its own box. How would I do that?
I’d like to center the products and text over the “add to cart” button. I had previously used this code and it stopped working when I implemented the code above. Any idea how to implement it so that both things work?
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img
{margin: 0 auto 8px}
.woocommerce ul.products li.product h3,
.woocommerce-page ul.products li.product h3
{text-align:center}
.woocommerce ul.products li.product a,
.woocommerce-page ul.products li.product a
{margin:0 0 0 18%; min-width:100px; width: 50%; text-align:center}
Last, I’d like to make the products themselves bigger. When viewing on mobile they are perfect but when viewing on desktop they are really small. Any way to make them larger?