• 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
116 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 (79,520 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 (79,520 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ź 101 wizyt
pytanie zadane 21 grudnia 2018 w HTML i CSS przez JuniorDevAspirant Bywalec (2,060 p.)
0 głosów
3 odpowiedzi 161 wizyt
pytanie zadane 17 sierpnia 2017 w HTML i CSS przez Bartix Początkujący (400 p.)
0 głosów
1 odpowiedź 79 wizyt
pytanie zadane 13 maja 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

65,740 zapytań

112,380 odpowiedzi

237,256 komentarzy

46,695 pasjonatów

Przeglądających: 197
Pasjonatów: 11 Gości: 186

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.

...