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...

ROZWIĄZANE Niespójny Login Bar - zmiany @media min-width oraz max-width w CSS

Dyskusja w 'Sklep internetowy eSklep' rozpoczęta przez użytkownika Nicky10, 27 Kwiecień 2016.

  1. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Witam serdecznie, po żmudnych próbach samodzielnej zabawy doprowadziłem swój login bar do wyglądu mniej więcej jaki bym oczekiwał, Niestety po wejściu na innym komputerze (inna rozdzielczosc) Pasek całkowicie się zniekształa (wyszukiwarka koszyk nachodzą na siebie)

    W załączniku wrzucam screen od siebie jak wygląda strona, tę samą chciałbym osiagnąć na każdej rozdzielczości

    A o to mój sklep: http://FitnesStore.pl/

    Strzelam, że wina leży w tym że operowałem przesuwaniem w PX a nie %, niestety nie znam sie na tym aż tak i chciałbym was prosic o pomoc, Dziekuje ! ;-)
     

    Załączone pliki:

    • fs.jpg
      fs.jpg
      Rozmiar pliku:
      93,7 KB
      Wyświetleń:
      520
  2. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    dałeś dla szukaj fixed zamiast jego pozycję zmienić w tplu, takie cyrki Ci się mogą dziać. Umieść w jednym z <li> tak jak w moim wąskim nagłówku i problem się skończy.
     
    Nicky10 lubi to.
  3. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Plus taki, że cieszę się, że Ty mi odpisałeś, bo czytałem trochę wątków i musze Ci pogratulowac umiejętności :)

    Minus taki, że nie do konca sie oientuje w tych tematach i zrozumiałem z tego tyle, że... :(
    Rozumiem, że wyszukiwarke mam wkleić w loginbar, aby była spójna a nie tak sobie przesuwać aby tylko się nakładały
    Wszystko ładnie pieknie, ale nie wiem jak to zrobić :(

    Dzieki za odpowiedź
     
  4. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    Poszukaj mojego tematu o wąskim nagłówku myślę, że tam otrzymasz odpowiedź na swoje pytanie :)
     
  5. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Juz prawie temat rozwiązany, wrzuciłem Twój Login bar wrzuciłem wyszukiwarkę, wygląda ładnie, ale na mniejszych rozdzielczosciach (czy na telefonach) wyszukiwarka glupieje troszke (button "szukaj") jest pod polem do wpisywania, a chciałbym, aby był obok

    zmiana w pixelach nie zbyt pomaga :(
     
  6. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    teraz nie mam jak Ci podać rozwiązania, ale poszukaj rozwiązania w css z media i ustaw wielkość dla zakresów rozdzielczości.
     
  7. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Generalnie to spędziłem nad tym "kochanym" loginbarem 3 dni (nie jestem programistą niestety) i i tak nie chodzi, teraz czytam o Media i az mi sie coś dzieje :)

    Zaczekam TheL aż będziesz miał czas, wolę się zając czymś dalej bo zamiast dopracowywać sklep, ja siedzę 3 dzien nad głupim paskiem

    Dzieki za wyrozumiałość !

    Edit:
    Czytam i czytam o tym Media, rozumiem juz o co chodzi, ale coś jest chyba nie tak bo wklejajac kod

    Kod:
    @media (max-width:962px){
      .login-bar1 {
        position:static;
        margin-bottom:0px;}
      .login-bar a {line-height: 70%}
    }
    
    Login bar na urzadzeniach mobilnych wcale nie "ustaje" tylko cały czas zachowuje sie jak w pozycji fixed"
     
  8. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302


    Kod CSS wygląda prawidłowo, składnia została zachowana, ale spróbowałbym dodać jedną wartość !important przy position:
    Kod:
    @media (max-width:962px){
      .login-bar1 {
        position:static!important;
        margin-bottom:0px;}
      .login-bar a {line-height: 70%}
    }
     
  9. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Super! Pomogło :) Jeszcze kwestia węższej wyszukiwarki na wersji mobilnej i można przemykać temacik :)
     
  10. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Mniejsza szerokość wyszukiwarki:

    Kod:
    @media (max-width:767px) {
    .rwd .s-grid-3:not(td) {
    width: 65%;
    } }
     
  11. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Stary... siedziałem nad tym siedziałem 3 dni i nie zrobiłem, a Ty w 15 minut, dzieki wielkie! jeszcze malutki detal, dało by rade aby ta wyszukiwarka schowała się wyżej obok
    jak na screenie
    +
    Aby przycisk "szukaj" niebieski lekko sie zmnieszył (aby był na szerokość taki jak pole wyszukwiania

    Dodam że korzystam z Login Baru autorstwa TheL'a
     

    Załączone pliki:

    • scr.jpg
      scr.jpg
      Rozmiar pliku:
      41,9 KB
      Wyświetleń:
      487
  12. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Ten kod powinien spowodować przeniesienie wyszukiwarki 25px wyżej, gdy szerokość ekranu nie będzie większa niż 400px. Musisz się tylko pobawić wartościami max-width lub min-width, aby dopasować kiedy wyszukiwarka ma zostać przeniesiona wyżej.

    Kod:
    @media (max-width:400px) {
    form.search-form.right {
    margin-top:-25px;
    } }
    Podczas zabawy z parametrami max-width oraz min-width możesz korzystać z polecenia zbudowanego w takim poniższym stylu. Pozwala ono określić minimalną oraz maksymalną szerokość ekranu przy której wyszukiwarka zostanie przeniesiona wyżej.
    Kod:
    @media (min-width:480px) and (max-width: 640px)
     
  13. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Dziekuje za informacje, będe pamiętał w przyszłosci

    Wygląda to ładnie, ale na moim netbooku starszym) o rozdzielczości 800 Przycisk szukaj jest pod polem wyszukiwarki a nie obok

    nie pomaga zmniejszenie "width" bo nawet przy 10% jest uparcie pod wyszukiwarka, mimo że mógłby się zmieścic obok...
    Ręce opadają.
     
  14. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Jest trochę zabawy, musisz dostosować elementy do odpowiednich szerokości ekranu. Gdy dostosujesz dla jednej szerokości, może się okazać, że dla większej szerokości ekranu teraz też będzie wymagana modyfikacja.
     
  15. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    OKej pobawię się:
    przyklad dla konkretnych ekranów:
    Kod:
    @media (min-width:480px) and (max-width: 640px)
    {
    form.search-form.right {
    margin-top:-25px;
    }}
    (To podniesie wyszukwiarke o 25 px ma ekranach od 480 do 640 px)
    pozniej przejść na wersje tabletowe, netbookowe
    np;

    Kod:
    @media (min-width:680px) and (max-width: 900px)
    {
    form.search-form.right {
    margin-top:-10px;
    }}
    Zgadza się, dobrze rozumiem ?
     
  16. Mariusz

    Mariusz pomoc.home.pl Moderator forum

    Wiadomości:
    3 087
    Docenione treści:
    302
    Tak, zgadza się.

    Ten kod spowoduje zmiany dla ekranów, których szerokość ma wartość przynajmniej 480px, ale nie jest większa niż 640px:
    Kod:
    @media (min-width:480px) and (max-width: 640px)
    {
    form.search-form.right {
    margin-top:-25px;
    }}

    Ten kod spowoduje zmiany dla ekranów, których szerokość ma wartość przynajmniej 680px, ale nie jest większa niż 900px:
    Kod:
    @media (min-width:680px) and (max-width: 900px)
    {
    form.search-form.right {
    margin-top:-10px;
    }}

    Tym sposobem możesz zmienić CSS dla określonych rozdzielczości ekranów.
     
    Nicky10 lubi to.
  17. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    @Mariusz dobrze napisał, warto stosować oba parametry dotyczące minimalnej i maksymalnej rozdzielczości. Widzę, że poradziliście sobie z problemem :)
     
  18. Nicky10

    Nicky10 Zaglądacz

    Wiadomości:
    11
    Docenione treści:
    0
    Troszkę zabawy ale ustawiłem, mam nadzieje, że nie bedzie juz z tym problemów, dziękuję wam !
     
  19. TheL

    TheL @Lider VIP Beta-tester

    Wiadomości:
    2 403
    Docenione treści:
    535
    nie będzie jeśli dla odpowiednich rozdzielczości ustawiłeś wszystko. Warto przy okazji popatrzeć co innego przydałoby się zmienić w innych rozdzielczościach.
    ps. na pw wysłałem Ci jeszcze informację :)
     
    Nicky10 lubi to.

Poleć forum znajomym