Niedziałające @media

pytanie zadane 9 sierpnia 2017 w HTML i CSS przez Kekk Początkujący (450 p.)

Chcę zrobić responsywną stronę, ale jest jeden problem - niedziałające @media.
Wpisuje to do kody wszystko ok i później jak sprawdzam w Chromie to nie widać efektów, a jak te sam atrybut dam to zwykłych stylów (które nie są zagnieżdżone w @media) to działa

#Chrobry
{
    width:400px;
    height:465px;
    border-radius:12px;
    margin:5px;
    background-image: url(testowe.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow:hidden;
    float:left;
}
@media all and (max-width: 400px) 
{
    #Chrobry
    {
        width:200px;
    }
}

Np. tutaj jak sprawdzam to mi nie działa, ale jak width:200px; dam w divie na górze to działa, jak coś to korzystam z tego sprawdzania jak stronka będzie wyglądała w różnych rozdzielczościach w Google Chrome, więc może tam coś jest nie tak?
Próbowałem już dawać spacje po width w @media, ale nie działało.
Jeszcze kod HTML jakby ktoś chciał

<!doctype html>
<html lang="pl">

<head>
<meta charset="utf8" />
<title>lolololi</title>
<meta name="description"  content="-------" />
<meta name="keywords" content="tagi" /> 
<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="stylemieszki.css"/>
<link rel="stylesheet" type="text/css" href="tlo.css" />
<link rel="stylesheet" type="text/css" href="css/fontello.css" />
<link href="https://fonts.googleapis.com/css?family=oswald:400,500" rel="stylesheet"> 
</head>
<body>
    <div class="wrapper">
        <div id="Mieszko">
        <p class="czytaj">  <i class="demo-icon icon-book-open"></i>
        </p>
        <p class="wiecej"> CZYTAJ WIĘCEJ </p>
        <p class="tekst"> tekst</p> 
        </div>
        <div id="Chrobry">
        lalalala
        </div>
    </div>
    
</body>

2 odpowiedzi

odpowiedź 9 sierpnia 2017 przez JayJay Mądrala (6,020 p.)
wybrane 9 sierpnia 2017 przez Kekk

Najlepsza

Nie umieściłeś:

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

https://developer.mozilla.org/pl/docs/Mozilla/Mobile/Viewport_meta_tag

https://css-tricks.com/snippets/html/responsive-meta-tag/

PS. Na stronach responsywnych właściwości takie, jak szerokość itp.elementów powinny być definiowane w % (nie w px)

odpowiedź 9 sierpnia 2017 przez Kamson Gaduła (4,280 p.)

Podobne pytania

Niedziałające @media

Zaloguj lub zarejestruj się, aby skomentować.

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

2 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci