Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Wersja dla strony na komórkę
david8213
post 14.06.2019, 10:30:46
Post #1





Grupa: Zarejestrowani
Postów: 220
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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

  1.  
  2. @media (max-width: 1023px) {
  3. #sidebar {display: none;
  4.  
  5. font-size: 13px;
  6. margin: 0 auto;
  7. background: rgba(0, 0, 0, 0.4);
  8. color: white;
  9. max-width: 380px;
  10. height: 120px;
  11. text-align: center;
  12. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  13. }
  14.  
  15. <div class="sidebar"> tekst </div>
  16. </body>


Ten post edytował david8213 14.06.2019, 10:57:57
Go to the top of the page
+Quote Post
Lord
post 14.06.2019, 10:39:15
Post #2





Grupa: Zarejestrowani
Postów: 201
Pomógł: 30
Dołączył: 10.03.2004

Ostrzeżenie: (0%)
-----


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 :

  1.  
  2. @media (max-width: 1023px) {
  3. #sidebar {display: none;}
  4. }
  5.  
  6. .sidebar {
  7. font-size: 13px;
  8. margin: 0 auto;
  9. background: rgba(0, 0, 0, 0.4);
  10. color: white;
  11. max-width: 380px;
  12. height: 120px;
  13. text-align: center;
  14. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
  15. }
  16.  
  17. <div class="sidebar"> tekst </div>
  18. </body>


bo #sidebar to nie to samo co .sidebar
Go to the top of the page
+Quote Post
david8213
post 14.06.2019, 10:58:24
Post #3





Grupa: Zarejestrowani
Postów: 220
Pomógł: 0
Dołączył: 9.12.2009

Ostrzeżenie: (10%)
X----


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.

  1. <!DOCTYPE html>
  2. body {
  3. font-family: Arial;
  4. color: grey;
  5. }
  6.  
  7. @media (max-width: 721px) {
  8. .bar {
  9. display: none;
  10. }
  11. }
  12.  
  13. @media (min-width: 1023px) {
  14. .bar {
  15. display: block;
  16. color: blue;
  17. }
  18. }
  19.  
  20.  
  21. <div class="bar"> tekst </div>
  22.  
  23. </BODY>
  24. </HTML>



Znalazłem czego brakowało:

W head trzeba wstawić

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0">


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

Ten post edytował david8213 14.06.2019, 12:07:22
Go to the top of the page
+Quote Post
Lord
post 14.06.2019, 11:58:13
Post #4





Grupa: Zarejestrowani
Postów: 201
Pomógł: 30
Dołączył: 10.03.2004

Ostrzeżenie: (0%)
-----


  1. <!DOCTYPE html>
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  3.  
  4. body {
  5. font-family: Arial;
  6. color: grey;
  7. }
  8.  
  9. @media (max-width: 721px) {
  10. .bar {
  11. display: none;
  12. color: red;
  13. }
  14. }
  15.  
  16. @media (min-width: 1023px) {
  17. .bar {
  18. display: block;
  19. color: blue;
  20. }
  21. }
  22.  
  23. </HEAD>
  24. <div class="bar"> tekst </div>
  25.  
  26. </BODY>
  27. </HTML>
Go to the top of the page
+Quote Post
dublinka
post 14.06.2019, 12:10:52
Post #5





Grupa: Zarejestrowani
Postów: 297
Pomógł: 37
Dołączył: 22.02.2008

Ostrzeżenie: (0%)
-----


Cytat(david8213 @ 14.06.2019, 10:58:24 ) *
Znalazłem czego brakowało:

W head trzeba wstawić

  1. <meta name="viewport" content="width=device-width; initial-scale=1.0">


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

Przecież od tego się zaczyna.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.10.2019 - 03:55