Wszystko o min-width | Webinsider - Internet widziany od środka ™

Tag: min-width

Wyrównanie wysokości wierszy w widoku katalogu produktów na przykładzie sklepu internetowego na WooCommerce

Jednym z częstszych tematów, z jakimi zwracają się do mnie „osoby z zewnątrz” w kontekście WooCommerce, jest wyrównanie wysokości, na jakiej znajdują się przyciski „dodaj do koszyka” i „wybierz opcje” w widoku listy produktów, czyli archiwum, w przypadku, gdy produkty mają różnej długości tytuły. I choć jest to właściwie tylko kwestia wizualna, niemająca żadnego przełożenia na działanie sklepu, to rozumiem problem, bo sam też tak preferuję. I choć są to łatwe i szybkie pieniądze, do tego z łatwym do osiągnięcia efektem zadowolenia po stronie klienta, to zamykam ten „kran z pieniędzmi” i pokażę, jak taki efekt uzyskać samodzielnie. Do tego w bardzo prosty sposób, bo za pomocą odrobiny CSSa…

Modyfikacja wyglądu menu zależnie od (rozmiaru) urządzenia za pomocą CSSa, na przykładzie WordPressa

Troszkę zmieniałem dziś strukturę menu na stronie, i podczas rutynowych testów wyszło, że przy pewnej szerokości ekranu menu główne po zmianach nie mieści się w jednej linii, tylko łamie się na 2 wiersze. Niby drobiazg, ale ja wolę, jak menu trzyma się razem. Wymagało to malutkiej modyfikacji wyglądu strony (w pewnych warunkach) za pomocą kodu CSS, i pomyślałem, że od razu też opublikuje artykuł na ten temat… Zwłaszcza że niedawno było m.in. jak zmodyfikować zawartość menu zależnie do wielkości ekranu (schować lub pokazać tekst/etykietę), czy jak zmienić wygląd linków, zależnie od adresu, na który wskazują.

Loading

Pin It on Pinterest