Zmiana rozmiaru grafiki (obrazka) na urządzeniach mobilnych

Dzięki za odpowiedz
Czy mógł być nieco bardziej rozwinąć, liczę się z tym ze nikt tego za mnie nie zrobi, jestem początkującym WordPressowcem ; ) Proszę tylko na jakieś konkretniejsze naprowadzenie.
Chciałbym dokładnie sprecyzować o co mi chodzi:
Na tej stronie: http://lr-dein-shop.de/shop/ jak pomniejszymy okno przeglądarki do minimum wyświetlają się 2 produkty (dwie kolumny).
Natomiast strona http://lr-dein-shop.de/ ma kwadratowe okienka z kategoriami, które po zmieszaniu szerokości strony znikają pojedynczo, co prowadzi w finale do mało efektownego wyświetlania ich i jednej kolumnie która nie wypełnia pełnej szerokości np: w smartphonie mam taki efekt.

Myślałem nad takimi rozwiązaniami:
1. Zmniejszyć rozmiar obrazków, by po zmniejszeniu utworzyły się dwie kolumny ale tylko mobilnie ( różne telefony maja rożną rozdzielczość ), wiec te rozwiązanie raczej odpada.
2. Utworzyć kolumnę z dwoma obrazkami ( przy pełnym ekranie wyświetlają się 2 kolumny czyli 4 obrazki w poziomie )
po zmieszaniu dzielą się na pól co daje efekt końcowy np na smartphonie dwóch kolumn ( jak w pierwszym linku Woocomerce)
P.S Myślałem by wpisać klasę z Woocomerce nie daje to jednak oczekiwanego rezultatu (chyba ze robię coś złe)
Z góry dziękuje.