I've been experimenting with my website using the Responsive Design View tool, and it's working perfectly fine (the window is responsive and all).
However, when I try to test it on Chrome, IE, or even Mozilla, the page becomes unresponsive. Do you have any thoughts on why this might be happening?
CSS:
@media screen and (min-device-width : 480px) and (max-device-width : 768px) {
.main_container {
width: 100%;
font-size: 16px;
line-height: 22px;
}
#header {
height: 200px;
background-color: tomato;
}
#stanga {
width: 70%;
float: left;
background-color: green;
}
.dreapta {
width: 30%;
float: left;
background-color: red;
}
footer {
height: 150px;
width: 100%;
background-color: black;
clear: both;
}
}
@media screen and (min-device-width : 767px) and (max-device-width : 1200px) {
.main_container {
width: 800px;
margin: 0 auto;
font-size: 16px;
line-height: 22px;
}
#header {
height: 200px;
background-color: tomato;
}
#stanga {
width: 650px;
float: left;
background-color: green;
}
.dreapta {
width: 150px;
float: left;
background-color: red;
}
footer {
height: 150px;
width: 800px;
background-color: black;
clear: both;
}
}
@media only screen and (min-device-width : 1200px) {
.main_container {
width: 900px;
margin: 0 auto;
font-size: 16px;
line-height: 22px;
}
#stanga {
width: 70%;
float: left;
background-color: green;
}
.dreapta {
width: 30%;
float: left;
background-color: red;
}
footer {
height: 150px;
width: 900px;
background-color: black;
clear: both;
}
}