When the window is maximized or the phone is in portrait position, the magnifying glass stays in its place.
However, when I resize the window or rotate the mobile phone, the position of the magnifying glass changes.
I've tried using different units like px, em, vw, and various display properties such as inline, flex, block, or inline-block. I also experimented with relative positioning but the issue persists.
Any suggestions on how to resolve this?
Thank you for your help!
P.S. Please forgive any errors in my English.
HTML:
...
<div id="input_search">
<form method="post">
<input type="text" name="search" id="search" maxlength="50" value="" placeholder="Search..."></input>
</form>
<img id="lupa" src="img/lupa.png">
<img id="back" src="img/back.png">
</div>
...
CSS:
#input_search input {
background-color: #ffa366;
color: black;
padding: 15px 0px;
float: left;
border: 0px;
font-size: 16px;
margin: 1% 0px 1% 0px;
width: 100%;
}
.indent1 {
text-indent: 17px;
}
.indent2 {
text-indent: 57px;
}
#lupa {
float: right;
height: 24px;
margin-top: -11%;
margin-right: 1%;
}