(HTML/CSS) Positioning Words/Pictures in an efficient way so window-shrinkage is considered

Question

I'm relatively new to coding websites and I had a question about positioning material and window shrinkage I hope anyone could answer!
I wanted to place an image, a message, and a password input around the center (It worked on my screen but for the code snippet below [you may have to scroll around to see anything], there is no space below the password line, so I'm obviously doing something wrong.. it's suppose to be dead-center of the screen).

However, I do not think I'm positioning my elements in the most efficient way. I'm also trying to take into consideration if the user shrinks their window, scroll bars are supposed to come up and the empty space is supposed to disappear (maybe like Twitter's login page: https://twitter.com/login). For my code, when I shrink the window, there is still empty space and I believe that is bad UI?

So in summary, if anyone could give any tips on how to efficiently position words and images and possibly how to efficiently use css to consider window shrinking, I would appreciate it so much :) Any help is welcomed and thank you again!

.pretty {
  text-align: center;
  color: #00008b;
  font-family: Lucida Console;
  position: absolute;
  top: 115%;
  left: 39%;
}

.pwd {
  text-align: center;
  position: absolute;
  top: 155%;
  left: 38.5%;
}

.chatbubble {
  height: 14%;
  width: 6%;
  position: absolute;
  top: 102%;
  left: 48.5%;
}

body {
  background-color: #fff0f5;
}

#wrapper {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

.contain {
  position: relative;
  height: 200px;
}

html {
  height: 100%;
}

<!DOCTYPE html>
<html>
<div id="wrapper">

  <head>
    <title> Log In </title>

    <link href="loginstyle.css" type="text/css" rel="stylesheet">

    <script language="JavaScript">
      function showPass(form, e) {
        e.preventDefault();

        var pass = form.pwd.value;
        var pass1 = "webdesign"

        if (pass == pass1) {
          window.location.href = 'https://www.google.com'
        } else {
          window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        }
      }
    </script>

  </head>

  <body>
    <div class="contain">
      <img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
      <p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>

      <form class="pwd center" onsubmit="showPass(this, event)">
        Password: <input type="password" name="pwd" />
        <input type="submit" value="Log In" />
      </form>
    </div>
  </body>
</div>

</html>

Daniel Sixl · Accepted Answer · 2018-12-27T11:10:50.027

You use a wrapper around body and head, which is not valid. The wrapper has to be inside your body tag:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <!-- Content, including wrappers, go here -->
</body>
</html>

Do not use absolute positioning (very few exceptions...) for responsive web design! There are several posibilities to center content horizontally and vertically - there are answers for that on SO. A modern one being the use of flexbox.

Use a max-width for your wrapper, not a fixed width! On small devices the fixed width will cause a scrolling area.

An efficient way for RWD is to start with mobile view and only minimal css styles. Most elements will flow and are responsive quite naturally. Add some styles to make images responsive and you are good to go for small devices.
Add a wrapper to give a maximum width for big screens. Start implementing additonal styles with media queries for arranging and modifying elements on devices with big viewports, Change font-sizes of sections and reposition things. Google for mobile first strategy.

html {
  height: 100%;
}

body {
  min-height: 100%;
  background-color: #fff;
  margin: 0;
  padding: 0;
}

#wrapper {
  margin: 0 auto;
  padding: 1rem;
  max-width: 960px;
  background-color: #fff0f5;
}

/* login section */

.login-section {
  min-height: 100vh;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* typo */

.pretty {
  color: #00008b;
  font-family: Lucida Console;
}

<!DOCTYPE html>
<html>
<head>
  <title> Log In </title>
  <link href="loginstyle.css" type="text/css" rel="stylesheet">
  <script language="JavaScript">
    function showPass(form, e) {
      e.preventDefault();
      var pass = form.pwd.value;
      var pass1 = "webdesign"
      if (pass == pass1) {
        window.location.href = 'https://www.google.com'
      } else {
        window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
      }
    }
  </script>
</head>

<body>
  <div id="wrapper">
  
    <main>
      <section class="login-section">
        <img class="chatbubble" src="https://via.placeholder.com/150" alt="Chat Bubble" />
        <p class="pretty">Welcome to a digital photobook.<br>Please enter the password to continue:</p>
        <form class="pwd" onsubmit="showPass(this, event)">
          Password: <input type="password" name="pwd" />
          <input type="submit" value="Log In" />
        </form>
      </section>
    </main>
    
  </div>
</body>
</html>

Wow! Thank you so much for your help, I learned a lot! I have a lot to learn but this was really useful :) Thank you again and hope you have a great day! — webdesignnoob, Dec 28 '18 at 02:26

score 0 · Answer 2 · answered Dec 27 '18 at 10:38

Never use manual percentage positioning, like left: 155%, etc. If you want to center stuff, use absolute positioning on a wrapper container and and then center-align inside elements with text-align: center. To center containers or images, etc, just give them display: inline-block property so they can flow to center.

Here is a modification of your css, you can see it in snipet as well:

.contain {
   position: absolute;
   top: 50%;
   left: 50%;
   text-align: center;
   -webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

.pretty {
  text-align: center;
  color: #00008b;
  font-family: Lucida Console;
}

.pwd {
  text-align: center;
}

.chatbubble {
    display: inline-block;
}

body {
  background-color: #fff0f5;
}

html {
  height: 100%;
}

<!DOCTYPE html>
<html>
<div id="wrapper">

  <head>
    <title> Log In </title>

    <link href="loginstyle.css" type="text/css" rel="stylesheet">

    <script language="JavaScript">
      function showPass(form, e) {
        e.preventDefault();

        var pass = form.pwd.value;
        var pass1 = "webdesign"

        if (pass == pass1) {
          window.location.href = 'https://www.google.com'
        } else {
          window.location.href = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
        }
      }
    </script>

  </head>

  <body>
    <div class="contain">
      <img class="chatbubble" src="chatbubble.png" alt="Chat Bubble" />
      <p class="pretty center">Welcome to a <br/> digital photobook. <br/> Please enter the password to continue: <br/> </p>

      <form class="pwd center" onsubmit="showPass(this, event)">
        Password: <input type="password" name="pwd" />
        <input type="submit" value="Log In" />
      </form>
    </div>
  </body>
</div>

</html>

Thank you for the advice and help :) I'll attempt to use these for my website and try to understand this! Thank you again and hope you have a nice day! — webdesignnoob, Dec 28 '18 at 02:27

(HTML/CSS) Positioning Words/Pictures in an efficient way so window-shrinkage is considered

2 Answers2