• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Media queries, sass - drobny problem

0 głosów
107 wizyt
pytanie zadane 26 marca 2017 w HTML i CSS przez shslr Obywatel (1,310 p.)
zamknięte 26 marca 2017 przez shslr

Mam do zrobienie takie zadanie. Jest prawie rozwiazane poza jednym podkreslonym podpunktem, moze ktos mi podpowie jak to zrobic? Probowalem roznych ustawien flexa ale nie wychodzi mi nic. Nie wiem jak ustawic zeby byly pod soba kolejno a nie w rzadku ;(

* na ekrantach mniejszych niż `450px`, ustaw elementy pod sobą i ukryj ostatni, 
* na ekranach większych niż `450px`, ale mniejszych niż `720px`, ustaw elementy obok siebie, pokaż ostatni i ukryj pierwszy, 
* na ekranach większych niż `720px`, ale mniejszych niż `1024px`, pokaż tylko ostatni i pierwszy element. 
Skorzystaj z podejścia **Mobile first**. 

Kod ponizej: 

.block{
  width: 25%;
  height: 100vh;
  border: 1px solid red;
  box-sizing: border-box;
  float: left;
@media (max-width: 450px){
  &:last-child{
  display: none;
    }
  }
  @media (min-width:451px) and (max-width:720px){
    display: inline-block;
    &:first-child{
      display: none;
    }
  }
@media (min-width:721px) and (max-width:1024px){
  display: none;
    &:first-child{
      display: inline-block;
}
    &:last-child{
      display: inline-block;
    }
  }
}

 

komentarz zamknięcia: Rozwiazane
komentarz 26 marca 2017 przez JSHolic Szeryf (78,320 p.)

ustaw elementy pod sobą

Do tego służy display: block; 

komentarz 26 marca 2017 przez shslr Obywatel (1,310 p.)
Tego tez probowalem ale nie chce dzialac. Wyswietlaja sie 4 elementy wiec display: none dziala ale elementy sa dalej ulozone obok siebie a nie jeden pod drugim.
komentarz 26 marca 2017 przez JSHolic Szeryf (78,320 p.)

Wyświetlają się obok siebie, bo masz:

float: left;

Do @media (max-width: 450px){ wrzuć:

clear: left;

 

komentarz 26 marca 2017 przez shslr Obywatel (1,310 p.)
Dzieki!

Podobne pytania

0 głosów
1 odpowiedź 85 wizyt
pytanie zadane 21 grudnia 2018 w HTML i CSS przez JuniorDevAspirant Obywatel (1,830 p.)
0 głosów
3 odpowiedzi 146 wizyt
pytanie zadane 17 sierpnia 2017 w HTML i CSS przez Bartix Początkujący (400 p.)
0 głosów
1 odpowiedź 77 wizyt
pytanie zadane 13 maja 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

63,266 zapytań

109,521 odpowiedzi

228,794 komentarzy

43,513 pasjonatów

Przeglądających: 168
Pasjonatów: 7 Gości: 161

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...