• 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

VPS Starter Arubacloud
0 głosów
298 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 ScriptyChris Mędrzec (190,190 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 ScriptyChris Mędrzec (190,190 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ź 426 wizyt
pytanie zadane 21 grudnia 2018 w HTML i CSS przez niezalogowany
0 głosów
3 odpowiedzi 436 wizyt
pytanie zadane 17 sierpnia 2017 w HTML i CSS przez Bartix Początkujący (420 p.)
0 głosów
1 odpowiedź 165 wizyt
pytanie zadane 13 maja 2017 w HTML i CSS przez maciek77 Użytkownik (830 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...