I am facing an issue with positioning the register form on my website. I want it to be fixed at the bottom-right corner of the window, without reaching the top. Although I managed to achieve this, the problem arises when the screen resolution changes. For instance, on a 1920x monitor, the button is not visible and only the email field can be seen. How can I ensure that the form stays in the same position regardless of the resolution?
Despite searching online for solutions, I couldn't find anything that works. I apologize if this seems like a beginner question, but this has been bothering me for some time now. I hope to find a reliable solution that I can use in the future as well.
This is how I envision the correct placement:
However, the form appears incorrectly on other monitors:
Code:
<!DOCTYPE html>
<html>
... (code snippet continues)
CSS Code:
html,body {
overflow: auto;
}
... (CSS code snippet continues)
The current display on my monitor is causing confusion:
Here is what it looks like on a 1920x1080 screen:
I experimented with using pixels and percentages, but unfortunately, the results were consistent and disappointing. Help! I'm losing patience...
Now that I have resolved the previous issue, I am encountering another problem - the icons are not maintaining their positions consistently across screens.
On higher resolutions, the alignment of the icons gets distorted:
Div Code:
<div id="main">
<form id="loginform" action="/action_page.php">
<label class="usernam" for="username">Username</label>
<input type="text" id="username" name="username" placeholder="Insert your username...">
<img id="userimg" src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/24/man-icon.png"/>
... (div code snippet continues)
</form>
</div>
CSS:
#userimg {
position: absolute;
top: 9%;
right: 84%;
}
... (CSS code snippet continues)