On my page "create.php," everything looks great on desktop computers with normal width and height: https://i.sstatic.net/XJBwA.png
However, when I resize the page to its smallest width:
https://i.sstatic.net/YlISM.png
When viewed on a Mobile device(samsung galaxy S9): https://i.sstatic.net/inda5.jpg
Here is some of my CSS code:
img {
margin-left: 30px;
margin-top: 15px;
}
.input {
margin-bottom: 50;
position: absolute;
top: 160%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid grey;
border-radius: 35px;
padding-left: 25px;
padding-right: 25px;
padding-top: 35px;
padding-bottom: 25px;
}
This is the input
div
<div class="input">
<h1>Create a quiz game!</h1>
<form action="create.php" method="post">
<!-- A big form -->
</form>
</div>
I am looking for suggestions on how to adjust the CSS to eliminate these gaps. Any ideas?
I've attempted modifying the form layout, but it still moves up occasionally...
While media queries can help, manually adjusting for various screen sizes is time-consuming. Is there a CSS framework like bootstrap that could simplify this process? Perhaps utilizing container divs could be a solution?