Width size dont work in my pessoal project

Vinícius Kock 0
Viewed 36

I am trying to do a Login Screen, but i have an error that i can't fix

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.login {
  display: block;
  width: 50%;
  height: 100vh;
  border-radius: 10px;
  float: left;
  text-align: center;
  overflow: hidden;
}

.image-responsive {
  width: 50%;
  float: left;
}

.img-login {
  width: 100%;
  height: 100vh;
}
<div class="container">
  <div class="image-responsive">
    <img class="img-login" src="../assets/login.jpg" alt="">
  </div>
  <div class="login">
    <img class="logo" src="../assets/envolti-dark.png" alt="envolti">
    <h1 class="welcome">Bem-vindo</h1>
    <h3 class="subtitle">Falta pouco para matar sua fome!</h3>
    <button type="button" class="login-with-google" (click)="authService.GoogleAuth()">Login com o Google</button>
    <br>
    <br>
    <p class="risk">----------------------------------</p>
    <p> OU FAÇA LOGIN COM UM E-MAIL </p>
    <p class="risk">----------------------------------</p>
    <br>
    <br>
    <div class="adress">
      <p class="email"><b>Endereço de E-mail:</b></p>
      <br>
      <input class="input-email" type="email" placeholder="Entre com seu endereço de e-mail" #userName required>
      <br>
      <br>
      <p class="password"><b>Senha:</b></p>
      <br>
      <input class="input-email" type="email" placeholder="Entre com sua senha" #userPassword required>
      <a class="forgot" routerLink="/forgot-password">Esqueci minha Senha</a>
      <br>
      <br>
      <br>
      <br>
      <button class="login-btn" (click)="authService.SignIn(userName.value, userPassword.value)">Login</button>
      <br>
      <br>
    </div>
    <p class="dont-cont">Não tem uma conta? <a class="cadastre" routerLink="/register-user"> Cadastre-se</a></p>
  </div>
</div>

but my result is not expected, the image dont occupy 50% of my screen, so anyone can help me?

Result of this code: Login Screen Image

responsive-design javascript css angular html
3 Answers

can u please try bootstrap classes like this snippet:

<div class="row container">
    <div class="col-6">
        <div class="image-responsive">
            //image code
        </div>
    </div>
    <div class="col-6">
        <div class="login">
            //login code
        </div>
    </div>
</div>
Nensi Gondaliya0

It's because of the CSS box module when you put width 50% in the login div, you tell CSS that you want it to occupy 50% of its parents.

Use width 100% to solve it.

You can use the screen as a reference too, using width 50vv

Guilherme Moraes0

proplem is:

 <div class="image-responsive">
    <img class="img-login" src="../assets/login.jpg" alt="">
  </div>

you gave to class 'image-responsive' 50% width, and to image in that div width 100%, so your image uses 100% width of 'image-responsive' div, which is 50% if you want to make your image less you need to make your img or image-responsive width less

Natttt0
Related