As I work on creating a web page, I am encountering an issue with defining CSS for both mobile and tablet devices. Despite my efforts to define separate CSS styles for each device, only one seems to be working correctly. How can I effectively specify different CSS for both mobile and tab devices?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* CSS for desktop */
.form-container{
width: 60%;
margin-left: 20%;
margin-right: 20%;
background: blue;
}
.form-container-inner{
padding: 20px;
}
/* CSS for tablet */
@media (min-width: 768px) and (max-width: 1024px) {
.form-container{
width: 80%;
margin-left: 10%;
margin-right: 10%;
background: red;
}
}
/* CSS for mobile */
@media only screen and (max-width: 992px){
.form-container{
width: 100%;
margin-left: 0%;
margin-right: 0%;
background: green;
}
}
</style>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
</head>
<body>
<div class="form-container">
<div class="form-container-inner">
<label>Name</label>
<input type="text" name="" >
<br>
<label>Surname</label>
<input type="text" name="" >
<br>
<label>Password</label>
<input type="text" name="" >
</div>
</div>
</body>
</html>