Tell me how to write the correct css media expression for the device 375x812 and 375x667 (Iphone 7). I need by default what would have the class .bl_counter {top: 270px;} But at the same time for the Iphone 7 should be .bl_counter {top: 330px;}

I try to write @media only screen and (max-width: 390px) { .bl_counter { top: 270px; } } @media only screen and (max-width: 390px) and (max-height: 670px){ /// Iphone 7 .bl_counter { top: 330px; } } @media only screen and (max-width: 390px) { .bl_counter { top: 270px; } } @media only screen and (max-width: 390px) and (max-height: 670px){ /// Iphone 7 .bl_counter { top: 330px; } } @media only screen and (max-width: 390px) { .bl_counter { top: 270px; } } @media only screen and (max-width: 390px) and (max-height: 670px){ /// Iphone 7 .bl_counter { top: 330px; } } But it doesn't work right

* In @media only screen and (max-width: 390px) {I have many other styles}

  • Why do you need what should be the default .bl_counter {top: 270px;} , write to the media request? - RavenTheX
  • height does not need to write ... - MaximLensky
  • I did not put it very correctly. “by default”, this is for all normal smartphones, with a resolution of less than 390px (but not for apple) - BlackStar1991 1:51 pm
  • @media screen and (max-width: 390px) {.bl_counter {top: 270px;}} @media screen and (max-width: 375px) {.bl_counter {top: 330px;}} What is the problem? - RavenTheX 1:58 pm
  • The problem is that the lower rule overrides the upper one. For Iphone 7, everything becomes good, for all other devices it breaks. Once again (BOTH devices have a display width of 375 px, only the height is different, and this is important) I have a class of an element on position: absolute hung, and everything breaks down if it does not work properly - BlackStar1991

0