I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would greatly appreciate it.
Additionally, I would like to know how to make the logo responsive. Any tips or techniques would be very helpful.
Thank you in advance for your response.
.parent {
position: absolute;
top: 10%;
left: 15%;
}
.wrapper {
position: relative;
width: 70vw;
height: 80vh;
background: #fff;
border-radius: 15px;
box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.wrapper::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 100%;
height: 100%;
background: linear-gradient(-45deg, #79df4a, #8673A1);
z-index: 6;
transform: translateX(100%);
transition: 1s ease-in-out;
}
.logo img {
position: absolute;
display: flex;
align-items: center;
justify-content: space-around;
height: 75px;
}
.signin {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 40%;
min-width: 238px;
padding: 0 10px;
}
form.sign-in-form {
opacity: 1;
transition: 0.5s ease-in-out;
transition-delay: 1s;
}
.title {
font-size: 35px;
color: #8673A1;
margin-bottom: 10px;
}
.panels-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
.panel {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 35%;
min-width: 238px;
padding: 0 10px;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: none;
}
.content {
color: #fff;
transition: 1.1s ease-in-out;
transition-delay: 0.5s;
}
.left-panel .content {
transform: translateX(-200%);
}
.right-panel .content {
transform: translateX(0);
}
.signin_item_block {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 40%;
min-width: 238px;
padding: 0 10px;
}
.signin_item_block.sign-in-block-form {
opacity: 0;
transition: 0.5s ease-in-out;
transition-delay: 1s;
}
/*Responsive*/
@media (max-width:779px) {
.wrapper {
width: 100vw;
height: 100vh;
background-color: red;
}
}
@media (max-width:635px) {
.wrapper::before {
display: none;
}
form {
width: 80%;
}
.signin_item_block.sign-in-block-form {
display: none;
}
.wrapper.sign-up-mode2 form.sign-in-block-form {
display: flex;
opacity: 1;
}
.wrapper.sign-up-mode2 form.sign-in-form {
display: none;
}
.panels-wrapper {
display: none;
}
}
@media (max-width:320px) {
form {
width: 90%;
}
}<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
</head>
<body>
<div class="parent">
<div class="wrapper">
<div class="logo">
<img src="https://zupimages.net/up/23/02/0itb.png" alt="image">
</div>
<div class="signin">
<form (ngSubmit)="logon()" class="sign-in-form">
<!-- Signin -->
<h3 class="title">Signin</h3>
</form>
<div class="signin_item_block sign-in-block-form"></div>
</div>
<div class="panels-wrapper">
<div class="panel left-panel"></div>
<div class="panel right-panel">
<div class="content">
...
</div>
</div>
</div>
</div>
</div>
</body>
</html>