Wyśrodkowanie elementów

0

Cześ,
korzystam z gotowego szablonu przy budowaniu sklepu (na prestashop). Próbuję przerobić kod tak aby produkty pojawiały się na desktopie wyśrodkowane. Na razie efekt jest taki:

screenshot-20180301114654.png

Z tego co zauważyłem szablon korzysta z gotowej karuzeli. Znalazlem jej skrypt i próbuje go przerobić.

Działa to tak, że na desktopie jeżeli jest mniej produktów to wyświetlaja sie wyrownane do lewej tak jak na screenie. Na urzadzeniach mobilnych jest ok bo na tabletach sa rozciagniete po calej szerokosci a na mobile jedne pod drugim.

W konsoli fragment odpowiedzalny za to wyglada tak:

screenshot-20180301130417.png

Probuje znalezc w skrypcie miejsce gdzie moge dopisac aby na desktopie przy wiekszej rozdzielczosci parametr Left przyjmował np 20% albo żeby można było w ogole wycentrowac wszystko i dac margin: 0 auto.

Znalazłem fragment gdzie moge dopisac np 20% ale wtedy o te 20% elementy są przesunięte na wszystkich rozdzielczościach i urządzeniach.

        appendWrapperSizes : function () {
            var base = this,
                width = base.$owlItems.length * base.itemWidth; //pierwsza czesc to ilosc elementow, druga to szerokosc pojedynczego


            base.$owlWrapper.css({
                "width": width * 2, //tu jest mnozone x2 nie wiem czemu ale dziala ;)
                 "left": 0 //to moge przesunac elementy ale chcialbym zeby byly przesuniete tylko przy szerokosci powyzej np 1200px
            });

Czy ktos moze mi pomoc? Zalaczam tez skrypt calej karuzeli.

Z gory dzieki!

1

Ja bym na Twoim miejscu jednak stylami próbował to wycentrować. W ostateczności możesz sprawdzać w JS-ie czy wyświetlasz na mobilce , albo nadpisać w media query (gorsza opcja) ale raczej pokombinowałbym z CSS-ami. Może wrzuć to gdzieś zobaczymy co się rozłazi.

0

Poczytałem trochę o hierarchii w CSS i rozwiązałem problem w ten sposób:

<div id="dopisek" class="owl-wrapper" (...)>

i w CSS:

  @media (min-width: 1200px) {
    #dopisek {

      margin-left: 20%; } }

Poniżej 1200 już się dostosowuje do szerokości ekranu i produkty zajmują całą szerokość. Rozwiązanie na razie mi wystarczy i działa bardzo dobrze. Pewnie potem będę musiał pokombinować jak pojawi się więcej produktów ale póki co dla 3, które będą jest idealnie :)

Dzięki za nakierowanie!

screenshot-20180301184416.png

1 użytkowników online, w tym zalogowanych: 0, gości: 1