I am currently in the process of revamping the login page for my website. I am facing a challenge where I am unable to adjust a div element to extend beyond 100% without it overflowing to the right side instead of the left. Despite trying various methods, I have not been successful in achieving the desired result. I would greatly appreciate it if someone could provide guidance on the CSS property that will help me achieve this.
Check out the CodePen and the code snippet below:
$(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 CodePen above showcases the login page, particularly on line 74 of the CSS. I am attempting to expand the button in both directions to create a wrap-around effect. However, I am only able to adjust it to the right side. I believe there should be a straightforward solution to this issue.
&[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;
}
Despite experimenting with various positioning and block size techniques, I haven't been able to find a solution. Any advice on this matter would be highly appreciated!
Thank you!