webski.design - projektowanie i tworzenie stron internetowych z pomysłem!
Grafik na froncie

Jak okiełznać sidebar woocommerce na urządzeniach mobilnych?

by webski, 25 września 2020

Jeśli zdarzyło Ci się kiedykolwiek konfigurować Woocommerce prawdopodobnie spotkałeś się z „nietypowym” bugiem występującym w tej wtyczce – niezależnym od zainstalowanego szablonu

Otóż dość często zdarza się że w wersji mobilnej pasek boczny „ucieka” pod główny content, co jest nieintuicyjne i niepraktyczne.

Zawsze można oczywiście edytować kod motywu i w odpowiednim pliku php wymusić inną kolejność wyświetlania, jednak istnieje prostszy acz zaskakująco rzadko wspominany sposób na rozwiązanie tego problemu.

W pierwszej kolejności musimy poznać klasę nadrzędnego kontera w którym mieści się główna treść oraz sidebar. Ważne aby to był kontener bezpośrednio nadrzędny, następnie pozostaje już nam tylko odnotowanie klasy dla main contentu oraz sidebara oraz zastosowanie poniższego kodu:

@media (max-width:767px) {
.klasa-kontenera-nadrzędnego {
display:flex; flex-direction: column;
}
.glowny-content-wewnatrz {
order: 2;
}
.sidebar-wewnatrz {
order: 1;
}
}

I voila – to wszystko!

by webski

Leave a comment

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

tw fb be gh
2019 © Euthenia