I'm having a problem where I'm doing a responsive display where the desktop is getting over @MEDIA SCREEN and the cell phone is not catching the responsive.
.portfolio-modal .close-modal {
position: absolute;
right: 25px;
width: 180px;
top: 5px;
height: 75px;
background-color: transparent;
cursor: pointer;
}
@media (max-width: 479px){
.portfolio-modal .close-modal {
width: 50px;
}
}
The correct one would be like this
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
I understand that '{' after the media was missing, this is used to delimit what is part of the rule.
Ancillary links for your study.
I did a test here and it worked, see:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.teste {
height: 100px;
width: 180px;
background-color: red;
}
@media (max-width: 479px){
.teste {
width: 50px;
}
}
</style>
</head>
<body>
<div class="teste"></div>
</body>
</html>
If it does not work the other thing impacting on the se if css