Forum PHP.pl > [CSS]Wersja dla strony na komórkę

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS]Wersja dla strony na komórkę

david8213

14.06.2019, 10:30:46

Dlaczego wyświetla mi zawartość DIVa zarówno na komórce jak i na laptopie skoro jest warunek :

[HTML] pobierz, plaintext 
<style>
 
@media (max-width: 1023px) {
    #sidebar {display: none;
 
  font-size: 13px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  max-width: 380px;
  height: 120px;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}
</style>
 
<body>
<div class="sidebar">  tekst </div>
</body>
[HTML] pobierz, plaintext

Lord

14.06.2019, 10:39:15

Cytat(david8213 @ 14.06.2019, 11:30:46 )

Dlaczego wyświetla mi zawartość DIVa zarówno na komórce jak i na laptopie skoro jest warunek :

[HTML] pobierz, plaintext 
<style>
 
@media (max-width: 1023px) {
    #sidebar {display: none;}
}
 
.sidebar {
  font-size: 13px;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.4);
  color: white;
  max-width: 380px;
  height: 120px;
  text-align: center;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
}
</style>
 
<body>
<div class="sidebar">  tekst </div>
</body>
[HTML] pobierz, plaintext

bo #sidebar to nie to samo co .sidebar

david8213

14.06.2019, 10:58:24

Zrobiłem jak ponizej i dalej tekst wyświetlany jest na smartfonie. Gdzie smartfon szerokość ma 720 a laptop 1080
Na komórce wyświetla mi tekst na szaro. Nie powinien w ogóle wyświetlić tekstu.

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<HTML>
<HEAD>
<style>
body { 
   font-family: Arial;
   color: grey;
}
 
@media (max-width: 721px) {
    .bar {
    display: none;
  }
}
 
@media (min-width: 1023px) {
    .bar {
    display: block;
    color: blue;
 }
}
 
</style>
 
<BODY>
<div class="bar"> tekst </div>
 
</BODY>
</HTML>
[HTML] pobierz, plaintext

Znalazłem czego brakowało:

W head trzeba wstawić

[HTML] pobierz, plaintext 
<meta name="viewport" content="width=device-width; initial-scale=1.0">
[HTML] pobierz, plaintext

to dla tych którzy moze kiedyś będą tego szukać

Lord

14.06.2019, 11:58:13

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<HTML>
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
<style>
body { 
   font-family: Arial;
   color: grey;
}
 
@media (max-width: 721px) {
    .bar {
    display: none;
    color: red;
 }
}
 
@media (min-width: 1023px) {
    .bar {
    display: block;
    color: blue;
 }
}
 
</style>
 </HEAD>
<BODY>
<div class="bar"> tekst </div>
 
</BODY>
</HTML>
[HTML] pobierz, plaintext

dublinka

14.06.2019, 12:10:52

Cytat(david8213 @ 14.06.2019, 10:58:24 )

Znalazłem czego brakowało:

W head trzeba wstawić

[HTML] pobierz, plaintext 
<meta name="viewport" content="width=device-width; initial-scale=1.0">
[HTML] pobierz, plaintext

to dla tych którzy moze kiedyś będą tego szukać

Przecież od tego się zaczyna.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.