At first, my media query was working perfectly fine. However, it suddenly stopped working. Interestingly, when I use the browser's developer tool, the media query functions correctly. https://i.sstatic.net/w8AMQ.png
https://i.sstatic.net/Srnsi.png
Even though I believe that there's no error in my media query code, here it is:
@media only screen and (max-width: 760px) and (max-device-width: 760px) {
.conainerInp {
display: block !important;
}
.contInputs,
.contInputs3 {
flex: 100% !important;
max-width: 100% !important;
margin-bottom: 10px;
width: 100%;
}
.last {
margin-bottom: 60px;
}
.contenido {
display: flex !important;
flex-wrap: wrap !important;
}
.contenedoresGen {
max-width: 100% !important;
width: 100% !important;
}
::ng-deep .mat-horizontal-content-container {
padding: 0 !important;
}
::ng-deep.mat-horizontal-stepper-content {
overflow: auto !important;
}
::ng-deep .mat-tab-label-container {
overflow-x: auto !important;
}
}
The issue occurred when the screen size was smaller than what was specified in the media query. https://i.sstatic.net/61JDk.png