I always seem to run into problems with absolute positioning in CSS. It's frustrating because it looks fine on Chrome and Firefox, even when I test responsiveness by adjusting the browser window size. However, on mobile devices with the same screen size, my absolute element shifts slightly upwards.
https://i.sstatic.net/UcWHn.png
#square-box-tratamiento-nebulizado {
height:20px;
width:100%;
text-align:-webkit-right;
z-index:1000;
/*margin-top:-63px;*/
position:absolute;
bottom: 61px;
pointer-events: none;
}
/*etiqueta pulverizado*/
#square-box-tratamiento-pulverizado {
height:20px;
width:100%;
text-align:-webkit-right;
z-index:1000;
/*margin-top:-29px;*/
position:absolute;
bottom: 26px;
pointer-events: none;
}
https://jsfiddle.net/x7b8hp9b/
Thank you in advance for your help!