Media Queries nie dziala

pytanie zadane 29 września 2017 w HTML i CSS przez Apper97 Obywatel (1,380 p.)

witam.

Problem polega na tym, ze nie dziala mi media queries, w ogole. Zero reakcji.

kod html

<body>

<!---                  NAVBAR            -->
<div class="wrapper">
    <div class="flex-container">
            <div class=" box left-menu">
                <img src="abcde.jpg"><p>BARBER SHOP</p>
            </div>
            <div class="box right-menu">
 <p>Home</p><p>About Us</p><p>Staff</p><p>Prices</p><p>Contact</p>               
            </div>
    </div>
    </div>
<div class="header">
     
    </div>











  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

kod css


.wrapper {
    width:100%;
    margin:0 auto;
}
.flex-container {
    display:flex;
    margin:0 auto;
    width: 100%;
    height: 100px;
    align-items: center;
    
}
.box {
    height: 100px;
    width: 100px;
    display: flex;
    box-sizing: border-box;
}
.left-menu {
    flex-grow: 2;
    flex-shrink: 4;
    margin-left: 40px;
}
.left-menu p {
    margin-left: 20px;
    align-self:center;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    opacity: 0.5;
    margin-top: 20px;
}
.left-menu p:hover {
    opacity: .8;
}
.left-menu img
{
    margin-left: 80px;
    align-self: center
}

.right-menu {
    flex-grow:8;
    flex-shrink: 1;
    justify-content: flex-end;
    margin-right: 40px;
}
.right-menu p {
    align-self: center;
    margin-top: 10px;
    padding-left:40px;
    font-size:17px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 1px;
    opacity: .5;
}
.right-menu p:hover {
    opacity:.8;
}

.header {
    width: 100%;
    height: 750px;
    background: gray;
}
@media only screen and (max-width: 700px) {
    wrapper {
        background-color:red;
    }
}

Nie dziala nawet gdy uzywam zmiany fontu, czegokolwiek, wiecie o co chodzi?

3 odpowiedzi

odpowiedź 29 września 2017 przez zgrybus Pasjonat (24,860 p.)

odpowiedź 29 września 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

dodaj

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

do sekcji head

komentarz 29 września 2017 przez Apper97 Obywatel (1,380 p.)

mozesz wyjasnic co oznacza ta linijka?

komentarz 29 września 2017 przez `Krzychuu Stary wyjadacz (13,940 p.)

w skrócie gdy dodasz tą linijkę to przeglądarka będzie dopasowywać szerokość do ekranu

komentarz 29 września 2017 przez Tomek Sochacki Ekspert (227,510 p.)

nie nalezy okreslac skali max chyba ze z jakis konkretnych powodow, ale w większości przypadków nie ma to sensu, starczy samo zainicjowanie na scale 1.