Как сделать выравнивание сетки товаров?

Привет всем.
Я новичок Wp. В коде не разбираюсь, мб немножко поменять цвет кнопки и тд.
Сейчас делаем магазин на Woo.. и не все получается.
Прошу помощи у знающих.
Делаем пока на поддомене -salf.wellsite.com.ua
на главной странице - внизу есть вывод 2-х категорий товара - топ продаж и новинки. выводил через шорткод - [product_category category="novinki" columns=2]
Есть и отдельная страция магазина - salf.wellsite.com.ua/shop
Изначально, когда только залили певрые товары, вся сетка была лесенкой кривой.
Поискав в гугле, вбил в дополнительные - Css -
span.price {
display: inline-block;
}
то выровняло всю сетку, но небыло видно стоимости и названия товара.
Тогда через насйтроки woocomerce - уменьшил изображения до 75*75
это сработало. частично. Так как на главной странице, куда я выводил 2 категории - топ продаж и новинки - изображения были большими и вылазили за пределы бокса.
Немного спасло ситуацию - код, в пользовательськие Сss также:
.woocommerce ul.products li.product a img {
box-shadow:none;
display:block;
height:50%;
margin:0 0 1em;
width:25%;
display: inline-block;
}
Компютерная версия сейчас - ну скажем более-менее.
А вот в моб версии - фото товара вытянутое.
Когда меняешь width: с 40 на 20, то на комп версии - картинки растянутые, на телефоне нормальные. Если нет - все наоборот.
Подскажите, пожалуйста, где что нужно подправить?