Conditional css settings based on screen resolution
I am a backend developer and my front end skills are weak trying to create a directional arrow that should be attached to an info window.
My current margin settings are displayed on most monitors.
However, on my IMAC I see a gap (2560 by 1440 resolution)
How can I specify conditional settings? if the reading is less than 1920x1080 the margin-top should be -1.5%, if it is more useful -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
+3
source to share
4 answers
You can do it:
@meida-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;
}
}
+1
source to share
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
+1
source to share
The best solution is probably using -10px margin instead of% in this case. This is likely because the% is taken from a larger viewport or container.
.info-box:after {
margin-top: -10px;
}
You can use media queries if you like:
.info-box:after {
margin-top: -1%;
}
@media (max-width:1920px) and (max-height:1080){
.info-box:after{
margin-top:1.5%
}
}
+1
source to share