It was decided to download an HTML5 template and adapt it, at the time of editing we realized that there are sections that ignore the lower @media screen and only take the last one, that is, if I have one of 360px, another of 480px and one of 730px, I would only take the 730px, for example:
@media screen and (max-width: 480px) {
#banner:after {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
background-color: #0A51913;
background-image: url("../../images/banner360.png");
z-index:0;
background-size:100%;
background-position:bottom CENTER;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 480px) {
#banner:after {
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
background-image: url("../../images/banner2.png");
background-size:100%;
background-position:top right;
background-repeat: no-repeat;
z-index:10;
}
}At the moment if I have a 360 screen ignore the code for this and use the 480px, and if there is another, ignore the first two and take the last one.