Search code examples
csshtmlresizealignment

Image sizing and size adaptation

I have a login form template finished but I have a couple questions on improving it.

First of all, I would like the LOGO image to adapt with the window, so that you can see all of it at all time (doesn't get chopped)

Second of all, I would like everything to adapt to a smaller window (maybe mobile). At the moment, everything gets unorganized once the window reaches a certain size. My idea is for the Logo & color (left part) moves to the top, and all the text bundles on top of each other.

Below I will include all the code used and screenshots of its current state.

Thanks!

HTML

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Belper</title>
  <meta name="author" content="Mathieu Larocque">
  <title>Bepler</title>

  <!-- Meta and Opengraph tags -->
  <meta name="description" content="Material Design Login Form for Mediahawkz.com">
  <meta name="keywords" content="html, html5, css, css3, material, form, login, google material design, material design, mediahawkz, mediahawkz.com">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:300'>

      <link rel="stylesheet" href="css/style.css">


</head>

<body>
  <!-- Main content -->
<main role="main">
  <div class="mediahawkz-login">
    <div class="div-left"></div>
    <div class="div-right">
      <div class="rkmd-form login">
        <h2 class="form-title">Login</h2>
        <form id="login" action="" method="POST" onsubmit="return false;">
          <div class="form-field">
            <label class="field-label" for="emailid">Email ID</label>
            <input id="emailid" type="text" name="emailid" class="field-input">
            <i class="material-icons md-18">error_outline</i>
          </div>
          <div class="form-field">
            <label class="field-label" for="pass">Password</label>
            <input id="pass" type="password" name="pass" class="field-input">
            <i class="material-icons md-18">error_outline</i>
          </div>
          <div class="form-row">
            <div class="msg">
              <!-- <span class="error">We can't find that email address. Have you registered?.</span> -->
            </div>
          </div>
          <div class="form-row clearfix">
            <div class="remember float-left">
              <input type="checkbox" name="rem" id="rem">
              <label for="rem">Stay Signed in</label>
            </div>
            <button id="submit" class="rkmd-btn btn-lightBlue ripple-effect float-right">LOGIN</button>
          </div>
          <div class="form-row clearfix">
            <a href="#" data-tab="reset" class="link float-right toggle" onclick="return false;">Forgot your password?</a>
          </div>
        </form>
      </div>

      <div class="rkmd-form reset" style="display: none;">
        <h2 class="form-title">Reset password</h2>
        <form id="reset" action="" method="POST" onsubmit="return false;">
          <div class="form-row">
            <span class="default">You will receive a link to create a new password via email.</span>
          </div>
          <div class="form-field">
            <label class="field-label" for="emailid">Email ID</label>
            <input id="emailid" type="text" name="emailid" class="field-input">
            <i class="material-icons md-18">error_outline</i>
          </div>
          <div class="form-row">
            <div class="msg">
            </div>
          </div>
          <div class="form-row clearfix">
            <button id="reset" class="rkmd-btn btn-lightBlue ripple-effect float-right">RESET PASSWORD</button>
          </div>
          <div class="form-row clearfix">
            <a href="#" data-tab="login" class="link float-right toggle" onclick="return false;">Login</a>
          </div>
        </form>
      </div>
      <div class="copyright">
        <p> Copyright © 2000-2017 - Mathieu Larocque - All Rights Reserved. </p>
      </div>
    </div>
  </div>
</main>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
}

*, *::after, *::before {
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  color: #03a9f4;
  outline: none;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.link {
  color: #575757;
  font-size: 14px;
}

.mediahawkz-login {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  width: auto;
  height: auto;
  background-color: #f9f9f9;
}
.mediahawkz-login .div-left {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  width: 50%;
  height: 100%;
  background-color: #6fa7f7;
  background-image: url("http://inddc.in/webroot/assets/img/sample/shortcode/logo/1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 25%;
}
.mediahawkz-login .div-right {
  overflow: auto;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  width: 50%;
  height: 100%;
}
.mediahawkz-login .copyright {
  margin-top: 10%;
  text-align: center;
}
.mediahawkz-login .copyright p {
  color: #575757;
  font-size: 13px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clearfix {
  *zoom: 1;
}

.clearfix::after {
  content: '';
  display: table;
  line-height: 0;
  clear: both;
}

.rkmd-btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  padding: 0 1.5rem;
  color: #424242;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Roboto', sans-serif;
  letter-spacing: .8px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  outline: none;
  border: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 2px;
  -webkit-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.rkmd-btn:hover {
  text-decoration: none;
}
.rkmd-btn.btn-lightBlue {
  color: #FFF;
  background-color: #03a9f4;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.225);
}
.rkmd-btn.btn-lightBlue:hover {
  box-shadow: 0 2px 10px 0px rgba(0, 0, 0, 0.275);
  background-color: #23b9fc;
}

.ripple-effect {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  vertical-align: middle;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  z-index: 1;
}
.ripple-effect .ripple {
  display: block;
  position: absolute;
  border-radius: 100%;
  background: rgba(255, 255, 255, 0.5);
  -webkit-transform: scale(0);
          transform: scale(0);
  pointer-events: none;
}
.ripple-effect .animated {
  -webkit-animation: ripple 0.6s linear;
          animation: ripple 0.6s linear;
}
@-webkit-keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}
@keyframes ripple {
  100% {
    opacity: 0;
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
  }
}

.rkmd-form {
  max-width: 355px;
  margin: 16% auto 0;
}
.rkmd-form .form-title {
  margin: 0;
  padding: 0;
  color: #03a9f4;
  font-size: 30px;
  font-weight: 300;
}
.rkmd-form .form-row {
  display: block;
  margin-top: 0.925em;
}
.rkmd-form .remember {
  margin-top: 6px;
}
.rkmd-form .form-field {
  position: relative;
  height: 72px;
  margin-top: 1em;
  padding: 16px 0 8px 0px;
}
.rkmd-form .form-field i {
  display: none;
  margin-top: 5px;
  float: right;
}
.rkmd-form .form-field::after, .rkmd-form .form-field::before {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 8px;
  width: 100%;
  height: 1px;
  background-color: #cdcdcd;
}
.rkmd-form .form-field::after {
  background-color: #03a9f4;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}
.rkmd-form .form-field.focused::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.rkmd-form .field-label {
  position: relative;
  display: block;
  color: #575757;
  font-size: 15px;
  line-height: 16px;
  -webkit-transform: translateY(24px);
          transform: translateY(24px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.rkmd-form .field-input {
  position: relative;
  display: block;
  color: #575757;
  width: 100%;
  height: 32px;
  font-size: 15px;
  line-height: 16px;
  margin: 0;
  padding: 4px 0;
  border: none;
  outline: none;
  background-color: transparent;
}
.rkmd-form .has-label .field-label {
  -webkit-transform: translateY(0) scale(0.85);
          transform: translateY(0) scale(0.85);
}
.rkmd-form .focused .field-label {
  color: #03a9f4;
}
.rkmd-form input[type="checkbox"] + label:before {
  display: inline-block;
  width: 1em;
  color: #6e6e6e;
  margin: 0 10px 0 0;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: -6px;
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  -webkit-font-feature-settings: 'liga';
          font-feature-settings: 'liga';
}
.rkmd-form input[type="checkbox"] {
  position: absolute;
  visibility: hidden;
}
.rkmd-form input[type="checkbox"] + label {
  cursor: pointer;
  color: #575757;
}
.rkmd-form input[type="checkbox"] + label:before {
  content: "\e835";
}
.rkmd-form input[type="checkbox"]:checked + label:before {
  content: "\e834";
  color: #03a9f4;
}
.rkmd-form input[type="checkbox"]:active:not(:disabled) + label:before {
  -webkit-transform: scale3d(0.88, 0.88, 1);
          transform: scale3d(0.88, 0.88, 1);
}
.rkmd-form input[type="checkbox"]:disabled + label:before {
  content: "\e909";
  cursor: not-allowed;
  color: rgba(0, 0, 0, 0.157);
}
.rkmd-form .form-field[error]::after, .rkmd-form .form-field[error]::before {
  background-color: #f44336 !important;
}
.rkmd-form .form-field[error] .field-label {
  color: #f44336 !important;
}
.rkmd-form .form-field[error] i {
  display: block;
  color: #f44336 !important;
}
.rkmd-form .msg {
  min-height: 20px;
}
.rkmd-form .error {
  display: block;
  margin: 0;
  padding: 0;
  color: #f44336 !important;
  font-size: 14px;
}
.rkmd-form .default {
  color: #575757 !important;
  font-size: 14px;
}

JS

$(document).ready(function() {
  $(".rkmd-form").rkmd_form();
  $(".ripple-effect").rkmd_rippleEffect();
});

(function($) {
  $.fn.rkmd_form = function() {
    var self, formField, formInput;

    self = $(this);
    formField = self.find(".form-field");
    formInput = self.find(".field-input");

    formInput.on("focus", function() {
      $(this)
        .parent()
        .addClass("focused has-label");
    });
    formInput.on("blur", function() {
      if ($(this).val() == "") {
        $(this)
          .parent()
          .removeClass("has-label");
      }
      $(this)
        .parent()
        .removeClass("focused");
    });
    formInput.each(function() {
      self = $(this);
      if (self.val().length > 0) {
        self.parent().addClass("has-label");
      }
    });
  };

  $.fn.rkmd_rippleEffect = function() {
    var btn, self, ripple, size, rippleX, rippleY, eWidth, eHeight;

    btn = $(this).not("[disabled], .disabled");

    btn.on("mousedown", function(e) {
      self = $(this);
      if (e.button === 2) {
        return false;
      }
      if (self.find(".ripple").length === 0) {
        self.prepend('<span class="ripple"></span>');
      }
      ripple = self.find(".ripple");
      ripple.removeClass("animated");

      eWidth = self.outerWidth();
      eHeight = self.outerHeight();
      size = Math.max(eWidth, eHeight);
      ripple.css({ width: size, height: size });

      rippleX = e.clientX - self.offset().left - size / 2;
      rippleY = e.clientY - self.offset().top - size / 2;

      ripple.css({ top: rippleY + "px", left: rippleX + "px" });
      ripple.addClass("animated");
    });
  };
})(jQuery);

$("#submit").on("click", function() {
  var form = $("#login");
  var emailid = form.find("#emailid");
  var pass = form.find("#pass");

  if (emailid.val() == "") {
    emailid.parent().attr("error", "");
  } else {
    emailid.parent().removeAttr("error");
  }
  if (pass.val() == "") {
    pass.parent().attr("error", "");
  } else {
    pass.parent().removeAttr("error");
  }
});

$("#reset").on("click", function() {
  var form = $("#reset");
  var emailid = form.find("#emailid");

  if (emailid.val() == "") {
    emailid.parent().attr("error", "");
  } else {
    emailid.parent().removeAttr("error");
  }
});

$(".toggle").on("click", function() {
  var tab = $(this).data("tab");
  var parents = $(this)
    .parents(".rkmd-form")
    .hide();
  $("." + tab).show();
});

Template credit goes to MediaHawkz.com, I'm quite new to coding and used this template from a free template website.

Solution

  • Your logo issue can be solved by switching background-size:cover to background-size contain :

    .mediahawkz-login .div-left {
 ...
   background-size: contain;
 ...
}

    The mobile part (called "responsive") is done with a few simple tricks. There's too much to explain here, but the basic principles are:

    Use @media queries to change your design rules for different sized devices :

    .mediahawkz-login .div-left {
  float:left;
  width: 100%;
  min-height:100px;
}

@media (min-width:600px){
  .mediahawkz-login .div-left {
    width:50%;
    min-height:100%;
}

    Design for the mobile device first, and then use the media queries to change the layout for larger screens. This is called "mobile first" design, and the code gets less confusing if you think this way.

    Use css "float" element to make left and right elements move around each other. Your template (which doesn't have very nice CSS by the way) uses absolute positioning... not always a good option for responsive design.

    Here is a code pen with the logo and positioning fixed. I only had to change 2 elements in the css; .mediahawkz-login .div-left and .mediahawkz-login .div-right . Shrink the window down horizontally or vertically and see what happens...

    https://codepen.io/anon/pen/gGewNY