CODEWITHSUNDEEP
htmlcssflexboxalignment
Jason Waltz
Jason Waltz

Reputation: 435

Adding more than 100% width to a centered div, the div only expands to the right

I am currently trying to re-design a login page for my site. Unfortunately I can't figure out how to set a div above 100% without going over to the right, and not left as well. I have tried many things and can't seem to get it. If someone would be kind enough to explain the CSS rule I am looking for it would be very much appreciated.

See codpen and snippet:

$(function() {
  "use strict"

  var name;
  var loggedin = $(".loggedin").hide();
  var t = 500;

  function store() {
    name = $("input#username").val();
  }

  function init() {
    $("input[type='submit']").on("click", function() {
      store();
      $(".login_inner, .login_inner__avatar").animate({
        'opacity': '0'
      }, t);
      setTimeout(function() {
        $(".login_inner__check").css({
          'opacity': '1',
          'animation': 'spinner 4s 0s linear',
          'transition': 'all ease 3s'
        });
      });
      setTimeout(function() {
        $(".login_inner__check--complete").find('i').animate({
          'opacity': '1'
        }, 500);
      }, 4200);
      setTimeout(function() {
        $(".login").fadeOut(500, function() {
          $(this).remove();
        });
      }, 5000);
      setTimeout(function() {
        loggedin.fadeIn(t, function() {
          $(this).show();
          $(this).find('h2').html("Welcome " + name);
        });
      }, 5500);
      setTimeout(function() {
        $(".loggedin h2").animate({
          'opacity': '1'
        }, t);
      }, 6000);
    });
  };
  init();
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

html, body {
  background: #EDF2F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login {
  background: #2B2D42;
  border-radius: 4px;
  width: 300px;
  height: auto;
}
.login_inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.login_inner__avatar {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png);
  background-size: cover;
  border: 3px solid #EDF2F4;
  width: 4em;
  height: 4em;
  margin: 0 auto;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
  border-radius: 100%;
}
.login_inner__check {
  border: 1px dashed #FFF;
  border-radius: 100%;
  width: 4em;
  height: 4em;
  position: absolute;
  margin: -185px 120px;
  opacity: 0;
  text-align: center;
}
.login_inner__check--complete i {
  line-height: 4em;
  color: #FFF;
  opacity: 0;
}
.login_inner input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #33354e;
  width: 100%;
  padding: 1.1em;
  color: #FFF;
  outline: none;
  font-size: 0.9em;
  text-align: left;
}
.login_inner input:last-of-type {
  border-bottom: none;
}
.login_inner input[type="submit"] {
  width: 110%;
  background: #4ECDC4;
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  margin: 3em auto 0 auto;
}

.loggedin {
  background: #2B2D42;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.loggedin h2 {
  opacity: 0;
  color: #FFF;
  text-align: center;
  font-size: 1.7em;
}

::-webkit-input-placeholder {
  color: #FFF;
}

:-moz-placeholder {
  color: #FFF;
}

::-moz-placeholder {
  color: #FFF;
}

:-ms-input-placeholder {
  color: #FFF;
}

::-ms-input-placeholder {
  color: #FFF;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='login'>
  <div class='login_inner'>
    <div class='login_inner__avatar'></div>
    <input id='username' placeholder='Give yourself a username' type='text'>
    <input id='email' placeholder='What is your email?' type='email'>
    <input id='password' placeholder='Choose a password' type='password'>
    <input type='submit' value='Sign up'>
  </div>
  <div class='login_inner__check'>
    <div class='login_inner__check--complete'>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>
<div class='loggedin'>
  <h2></h2>
</div>

The above pen is the login page, if you look on line 74 of CSS. I am trying to expand this button to both directions to give a wrap around effect. I can only adjust the right for some reason. I am sure it's an easy solution.

  &[type="submit"] {
    width: 110%;
    background: $c-btn-color;;
    cursor: pointer;
    border-bottom-left-radius: $radius - 2;
    border-bottom-right-radius: $radius - 2;
    text-align: center;
    margin: 3em auto 0 auto;
 }

I have tried all different types of positioning, block sizes, etc. I would be very grateful for some advice!

Thank you!

Upvotes: 1

Views: 75

Answers (1)

kukkuz
kukkuz

Reputation: 42352

Your have auto left and right margins on the button - remove it and add align-self: center to wrap it around - see relevant code excerpt:

&[type="submit"] {
    width: 110%;
    background: $c-btn-color;;
    cursor: pointer;
    border-bottom-left-radius: $radius - 2;
    border-bottom-right-radius: $radius - 2;
    text-align: center;
    margin-top: 3em; /* <-- only margin top */
    align-self: center; /* added */
}

See updated codepen and snippet:

$(function() {
  "use strict"

  var name;
  var loggedin = $(".loggedin").hide();
  var t = 500;

  function store() {
    name = $("input#username").val();
  }

  function init() {
    $("input[type='submit']").on("click", function() {
      store();
      $(".login_inner, .login_inner__avatar").animate({
        'opacity': '0'
      }, t);
      setTimeout(function() {
        $(".login_inner__check").css({
          'opacity': '1',
          'animation': 'spinner 4s 0s linear',
          'transition': 'all ease 3s'
        });
      });
      setTimeout(function() {
        $(".login_inner__check--complete").find('i').animate({
          'opacity': '1'
        }, 500);
      }, 4200);
      setTimeout(function() {
        $(".login").fadeOut(500, function() {
          $(this).remove();
        });
      }, 5000);
      setTimeout(function() {
        loggedin.fadeIn(t, function() {
          $(this).show();
          $(this).find('h2').html("Welcome " + name);
        });
      }, 5500);
      setTimeout(function() {
        $(".loggedin h2").animate({
          'opacity': '1'
        }, t);
      }, 6000);
    });
  };
  init();
});
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
}

html, body {
  background: #EDF2F4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login {
  background: #2B2D42;
  border-radius: 4px;
  width: 300px;
  height: auto;
}
.login_inner {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}
.login_inner__avatar {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217538/default-avatar-ponsy-deer.png);
  background-size: cover;
  border: 3px solid #EDF2F4;
  width: 4em;
  height: 4em;
  margin: 0 auto;
  -webkit-transform: translateY(-35px);
          transform: translateY(-35px);
  border-radius: 100%;
}
.login_inner__check {
  border: 1px dashed #FFF;
  border-radius: 100%;
  width: 4em;
  height: 4em;
  position: absolute;
  margin: -185px 120px;
  opacity: 0;
  text-align: center;
}
.login_inner__check--complete i {
  line-height: 4em;
  color: #FFF;
  opacity: 0;
}
.login_inner input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: none;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid #33354e;
  width: 100%;
  padding: 1.1em;
  color: #FFF;
  outline: none;
  font-size: 0.9em;
  text-align: left;
}
.login_inner input:last-of-type {
  border-bottom: none;
}
.login_inner input[type="submit"] {
  width: 110%;
  background: #4ECDC4;
  cursor: pointer;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  text-align: center;
  margin-top: 3em;
  /* <-- only margin top */
  align-self: center;
  /* added */
}

.loggedin {
  background: #2B2D42;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.loggedin h2 {
  opacity: 0;
  color: #FFF;
  text-align: center;
  font-size: 1.7em;
}

::-webkit-input-placeholder {
  color: #FFF;
}

:-moz-placeholder {
  color: #FFF;
}

::-moz-placeholder {
  color: #FFF;
}

:-ms-input-placeholder {
  color: #FFF;
}

::-ms-input-placeholder {
  color: #FFF;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='login'>
  <div class='login_inner'>
    <div class='login_inner__avatar'></div>
    <input id='username' placeholder='Give yourself a username' type='text'>
    <input id='email' placeholder='What is your email?' type='email'>
    <input id='password' placeholder='Choose a password' type='password'>
    <input type='submit' value='Sign up'>
  </div>
  <div class='login_inner__check'>
    <div class='login_inner__check--complete'>
      <i class='fa fa-check'></i>
    </div>
  </div>
</div>
<div class='loggedin'>
  <h2></h2>
</div>

Upvotes: 1

Related Questions