Matthias Burger
Matthias Burger

Reputation: 5946

responsive layout debugging with chrome device-toolbar and media queries

I'm trying to write a login-form for my application with html and css. in my css I'm using @media-queries:

@media (max-width: 767px){
    body {
        font-size: 25px;
    }
    ... and some more
}

so in a resolution more than 767px it looks like this: enter image description here

when I resize to a resolution lower than 767px it looks like this (all bigger, no box with shadow etc.): enter image description here

then, I change to device view in Google Chrome with enter image description here

I switch to iPhone 5 with a resolution of width:320px and height:568px and the result looks like this (like the one bigger than 767px):

enter image description here

shouldn't it look like the result lower than 767px?

Upvotes: 2

Views: 400

Answers (1)

RacoonOnMoon
RacoonOnMoon

Reputation: 1586

Add the viewport tag in your head like:

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

More about the viewport:

https://www.w3schools.com/css/css_rwd_viewport.asp

Upvotes: 2

Related Questions