I'm trying to mount a responsive login box. Where it has .css
for monitor screens and another for mobile. The problem is that the cell phone is not working.
I test the following:
@media only screen and (max-width: 550px) {
If I shrink the window in the browser to less than 550px
the .css
changes, but when I open the page on my iPhone 6 the check does not work. How do I identify the mobile screen with .css ?
.box_login {
position: relative;
top: 20px;
width: 400px;
color: #666;
border-radius: 4px;
background: #FFFFFF;
margin: auto auto 100px;
overflow: hidden;
padding: 0 0 50px 0;
}
.box_body {
margin: 30px;
}
.box_login_header {
background: #0091FF;
position: relative;
height: 185px;
width: 100%;
margin-bottom: 10px;
}
.cont-lock {
width: 100%;
height: 150px;
position: relative;
}
.cont-lock-img {
margin-top: 25px;
margin-left: 62px;
}
.cont-lock::after {
content: '';
width: 0;
height: 0;
display: block;
position: absolute;
margin: auto;
left: 0;
right: 0;
bottom: -35px;
border: 7px solid rgba(0, 0, 0, 0);
border-bottom-color: white;
}
.box_login h1 {
margin-left: 20px;
margin-top: 0;
color: #cfd8dc;
line-height: 35px;
}
.box_login button {
width: 330px;
}
.box_login_footer {
width: 100%;
height: 45px;
background: #0091FF;
position: absolute;
bottom: 0;
color: #FFFFFF;
text-align: center;
padding: 10px 0 0 0;
}
@media only screen and (max-width: 550px) {
.box_login {
width: 95%;
}
}
<div class="box_login">
<div class="box_login_header">
<div class="cont-lock">
logo
</div>
</div>
<div class="box_body">
FORM
</div>
<div class="box_login_footer">
</div>
</div>