1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

W TRAKCIE Zmiana położenia pola wyszukiwanie "wyszukiwarka produktów"

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika cafix, 11 Sierpień 2017.

  1. cafix

    cafix Początkujący

    Wiadomości:
    9
    Docenione treści:
    2
    Szukam topiku ale nie mogę znaleźć nic podobnego. Próbuję wycentrować pole do wyszukiwania produktów tak aby było nad logo firmy. W sumie po części się to udało ale rozjeżdża się - ramka mi pływa i przemieszcza się jak zmniejszam rozdzielczość nie jest responsywne. Na komórce w ogóle spada na dół może jest funkcja jakaś która trzyma parametry. Proszę o pomoc. Może ktoś z was wie jak to ustawić.

    wygląd mobile komórka.jpg ramka wyszukajka2.jpg ramka wyszukajka1.jpg

    dodałem do własne CSS

    header .logo-bar .search-form {
    position: absolute;
    top: 10px;
    left: 475px;
    margin: 0;
    background-color: white;}


    strona:
    https://sklepagnex.pl/

    wygląd mobile komórka.jpg
    ramka wyszukajka1.jpg ramka wyszukajka2.jpg
     
  2. papux

    papux Laureat

    Wiadomości:
    402
    Docenione treści:
    114
    Dopisz do ustawień co teraz masz w CSS

    Kod:
    header .logo-bar .search-form .search-input {
        margin-left: 200%;
    }
    header .logo-bar .search-form .btn {
        margin-left: 200%;
    }

    Najlepiej używać odległości procentowej co da w miarę równe przesuwanie się szukajki wraz ze zmianą szerokości przeglądarki
    To ci wycentruje represywnie gdyż procenty zawsze są liczone od obecnej szerokości przeglądarki.
    Pozdro
     
    Ostatnia modyfikacja: 12 Sierpień 2017
    Mariusz lubi to.
  3. cafix

    cafix Początkujący

    Wiadomości:
    9
    Docenione treści:
    2
    Dziękuje papux użyłem twego kodu - w sumie nie jest to do końca o co mi chodzi bo ramka wyszukiwarki nadal pływa jak zmniejszam przeglądarkę. Wciąż te pole się przemieszcza. Ale wygląda to o niebo lepiej niż z moim kodem. Może ktoś jeszcze ma jakieś sugestię :)
     
  4. papux

    papux Laureat

    Wiadomości:
    402
    Docenione treści:
    114
    Skorygujmy pływanie przy mniejszych rozdzielczościach

    Kod:
    @media (max-width:1199px) {
    header .logo-bar .search-form .search-input {
        margin-left: 155%;
    }
    }
    @media (max-width:1199px) {
    header .logo-bar .search-form .btn {
        margin-left: 155%;
    }
    }
    Dopisz kod pod tym co podałem ci wyżej.

    Musisz dla każdej rozdzielczości przy zmianie ustawić odpowiednie procenty
     
    Mariusz lubi to.
  5. cafix

    cafix Początkujący

    Wiadomości:
    9
    Docenione treści:
    2
    Chyba już dobrze - Dziękuję papux :)

    Własny CCS
    d1.jpg

    /*Wycentrowana ramka wyszukiwarki*/
    header .logo-bar .search-form .search-input {
    margin-left: 200%;
    }
    header .logo-bar .search-form .btn {
    margin-left: 200%;
    }

    @media (max-width:1199px) {
    header .logo-bar .search-form .search-input {
    margin-left: 155%;
    }
    }
    @media (max-width:1199px) {
    header .logo-bar .search-form .btn {
    margin-left: 155%;
    }
    }

    @media (max-width: 979px) {
    .rwd form.search-form fieldset input.search-input {
    width: 200px;
    margin-left: 40%;
    }}

    @media (max-width: 979px) {
    .rwd form.search-form fieldset .btn {
    width: 40px;
    margin-left: 40%;
    }}
    @media (max-width: 767px)
    .rwd header .logo-bar form.mini-search .btn {
    height: 40px;
    width: 40px;
    margin-left: 0;
    }}
     
    Mariusz lubi to.
  6. cafix

    cafix Początkujący

    Wiadomości:
    9
    Docenione treści:
    2
    Niestety to rozwiązanie zaproponowane przez papux nie jest w 100% poprawne. Wciąż w różnych rozdzielczościach pole wyszukiwania pływa i zmienia swoje położenie. Także może ktoś inny ma jakoś pomysł jak zablokować i wyśrodkować pole wyszukiwania.
     

Poleć forum znajomym