conditional css settings based on screen resolution

Question

I'm a backend developer and my front end skills are weak, trying to create an up pointing arrow that should be attached to an info box.

My current margin settings, displays fine on most monitors.

However on my IMAC I see a gap (2560-by-1440 resolution)

How can I state a conditional settings? if display is less than 1920x1080 margin-top should be -1.5% if more use -1%

Here is the css for my arrow.

.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }

Thank you

Answer 1

you can do like this-

@media-screen and (min-width: 1920px) {
.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }
  }

Answer 2

use this ..

@media screen and (min-width: 1920px) {
.info-box:after {
              content: ' ';
              width: 0px;
              height: 0px;
              border-top: 10px solid transparent;
              border-left: 10px solid transparent;
              border-bottom: 20px solid;
              border-bottom-color: #FFFFFF;
              border-right: 10px solid transparent;
              margin-top: -1.5%;
              left: 8%;
              position: absolute;
              z-index: 10000;
            }
} 

similarly use max-width

Answer 3

A better solution is probably to use a -10px margin instead of a % in this instance. This is likely due to the % being taken from the larger viewport or a container.

.info-box:after {
    margin-top: -10px;
}

You can use media queries if you prefer:

.info-box:after {
    margin-top: -1%;
}
@media (max-width:1920px) and (max-height:1080){
    .info-box:after{
        margin-top:1.5%
    } 
}

Answer 4

Use:

@media(max-width: 1920) (
  .your class {
    margin-top: ...
  } 
} 

to define properties up to and including the max width of the displayed document.