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

Ukrycie diva przy określonej rozdzielczości

Object Storage Arubacloud
0 głosów
160 wizyt
pytanie zadane 13 lutego 2023 w HTML i CSS przez zbiku25 Bywalec (2,940 p.)

Cześć,

Próbuję za pomocą CSS ukryć div ze zdjęciem (half-second), kiedy rozdzielczość ekranu jest niższa niż 351px. Niestety div nie znika tylko przesuwa się pod spód:( 

Czy jest ktoś w stanie podpowiedzieć mi co robię źle? 
Poniżej kod CSS

 

@media screen and (min-width:351px)
{
	.half-second img
	{
		height: auto; 
		width: 100%; 
		z-index:-50;
		margin-top:-30px;

	}
	
	.half-second
	{

		display:flex;
		align-items:center;
		width:50%;
	}
}

@media screen and (max-width:350px)
{
	.half-second img
	{
		display:none;
		visibility:hidden;

	}
	
	.half-second
	{

		display:none;
		visibility:hidden;

	}
}

 

komentarz 13 lutego 2023 przez Fiji404 Użytkownik (860 p.)
to są twoje wszystkie style CSS ?
komentarz 13 lutego 2023 przez VBService Ekspert (253,420 p.)

@zbiku25, Sprawdź

[ on-line ]

@media screen and (max-width:350px)
{
  .half-second
  { 
    display:none; 
  }
}

 

komentarz 13 lutego 2023 przez zbiku25 Bywalec (2,940 p.)

@Fiji404, nie, ale mam ponad 2500 linii więc raczej nie wkleję wszystkiego...

komentarz 13 lutego 2023 przez zbiku25 Bywalec (2,940 p.)

@VBService, sprawdziłem ale nadal nie znika :(

komentarz 13 lutego 2023 przez VBService Ekspert (253,420 p.)

mam ponad 2500 linii 

To może wrzuć, proszę (oczywiście jak chcesz) np. na pastebin, może da się przy okazji "zoptymalizować" laugh

komentarz 13 lutego 2023 przez zbiku25 Bywalec (2,940 p.)

@VBService, z przyjemnością :)

https://pastebin.com/ct81rxSa

komentarz 13 lutego 2023 przez zbiku25 Bywalec (2,940 p.)
Panowie,

wygląda na to, że znalazłem przyczynę. Otóż miałem ustawiony half na min-width:350px. Przy zmniejszaniu rozdzielczości w pewnym momencie zdjęcie wskakiwało pod ten half i widać było jego część. W przypadku rozdzielczości mojego ekranu okazało się, że powinien ustawić display:none dla half-second uż od 731 px.

Dziękuję za zaangażowanie i analizę tego case.

Wszelkie sugestie dotyczące optymalizacji mile widziane :)

Pozdrawiam,

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
2 odpowiedzi 192 wizyt
pytanie zadane 15 kwietnia 2018 w HTML i CSS przez MałyAleWariat Bywalec (2,830 p.)
0 głosów
3 odpowiedzi 1,022 wizyt
pytanie zadane 3 kwietnia 2018 w C i C++ przez MsMaciek123 Pasjonat (24,760 p.)
0 głosów
2 odpowiedzi 192 wizyt

92,584 zapytań

141,433 odpowiedzi

319,668 komentarzy

61,966 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

...