0

I have a page "create.php" which looks fine on Computers with normal width and height: Just enough space between form and Navbar

When I resize page smallest width it can go:

Form goes above the Navbar, making part of the form going off the page

When I run on Mobile device(samsung galaxy S9): Form goes all the way to the bottom, many empty space

Here is 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;
            }

Here is the input div

<div class="input">
        <h1>Create a quiz game!</h1>
        <form action="create.php" method="post">
<!-- A big form -->
</form>
</div>

Basically, I want to change the CSS so that all of the gaps are fine. Does anyone have any idea how to do this?

I have tried to change my form so it works better, but the issue of it moving up still works sometimes...

The media query is good, but it is very timeconsuming to do it manually for lots of screen sizes..

Is there a CSS library like bootstrap that can make it better... Maybe I have to use container divs?

  • You should use media query for that. With all that code, it's hard to tell you to do this. We can help you out more if you edit your code and use it as a code snippet. – CanUver May 18 '20 at 21:54
  • @CanUver ok! thx will do –  May 18 '20 at 21:55

3 Answers3

0

You need to use Media Query Check this link for more information

Taghi Khavari
  • 6,272
  • 3
  • 15
  • 32
0

Coding for phones can be tricky since there's so many different scales and resolutions but I would recommend trying this https://stackoverflow.com/a/13550716/10816600 and if that doesn't work for you, you can redirect the phone users to another page that you have made work for phones.

https://css-tricks.com/snippets/javascript/redirect-mobile-devices/

Blomqen
  • 61
  • 1
  • 6
0

Use vw viewport unit of css3. I recomend this article

Vinicius Dias
  • 93
  • 6