Dlaczego nie działa @media screen w css?

Question

Witajcie,

mam w css

@media screen and (max-width: 400px) {
  #banner h1 {
    font-size: 100em;
  }
}

oraz w html

<meta name="viewport" content="width=device-width, initial-scale=1" />


<section id="banner" class="bg-img">
				<div class="inner">
					<header>
						<h1>TEST</h1>
					</header>
				</div>
			</section>

,ale nic nie działa.

Jak to naprawić?

Answer 1

Działa, tylko litery są tak wielkie (100em to domyślnie 1600 pikseli), ze trzeba przewinąć na dół.

Comments

Rozumiem. Tyle, że w tym moim  kodzie nie działa. Jak to sprawdzić w developer tools w przeglądarce?

---

Odpowiem ci jak informatyk informatykowi: u mnie działa :)

Masz tylko ten kod, czy jeszcze coś (wrzuć całość)?

---

http://pastie.org/p/0OmrXETp8GJIELSYeNw4qk

---

@SzkolnyAdmin,

Ok działa. Dziękuję.

---

Cieszę się, że pomogliśmy.

---

To forum nigdy nie zawodzi :) Bez Was ani rusz :)

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1" />
 
 
<section id="banner" class="bg-img">
                <div class="inner">
                    <header>
                        <h1>everything's gonna be okay</h1>
                    </header>
                </div>
            </section>

@media screen and (max-width: 400px) {
  #banner h1 {
    font-size: 10vw;
    background-color: green;
  }
}

Teraz powinno być okay

Jeśli chcesz sprawdzić czy media działają możesz ustawić inny  background-color lub color ...

Kod działa jak trafnie zauważył SzkolnyAdmin (zbyt duża czcionka)

Jeżeli Chodzi o devtools(firefox) W momencie kiedy zmniejszysz okno poniżej 400px(w Twoim przypadku) W inspektorze powinna się pojawić informacja odnośnie media i selektora na którym został uruchomiony.

Comments

@niezalogowany,

A jak prawidłowo ustawić background image na ekran telefonu?

---

Sprecyzuj wrzuć kod, kontekst bo nie lubię z fusów wróżyć ...

tak szybko to ustawiłbym =>

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

---

Ok,

<section id="banner" class="bg-img" data-bg="image.jpg">

i chcę ten image umieścić w @media.

W między czasie wychodzi mi jeszcze dziwna rzecz. Gdy wpisze w @media

font-family: "Fondamento", cursive;

wychodzi mi dziwna, inna czcionka.

Gdy zmienię na 

font-family: inherit;

też wychodzi mi inna.

---

Myślę Że to bardzo dobry materiał  na osobne pytanie na forum

Sprecyzuj, dodaj cały kod i będziemy się z tym Bawić

p.s

Dołącz poprawnie czcionki w html i css

 

---

https://forum.pasja-informatyki.pl/537379/jak-prawidlowo-zmiescic-background-image-w-%40media-css