0

sou iniciante e estou me aventurando no mundo de desenvolvimento Web. Estou tendo problemas para aplicar responsividade nas páginas, sempre fica ~sobrando~ espaço no body (aparece uma barra de rolagem horizontal) e quando mudo de tela o alinhamento dos componentes sempre fica diferente. Essa é minha primeira pergunta na plataforma, então desde já peço perdão caso o código seguinte não dê as informações necessárias. Agradeço pela atenção

* {
  margin: 0;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

body {
  min-width: 100vh;
  min-height: 100vh;
}

section .listServices {
  position: relative;
  top: 20vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

section .listServices ul {
  list-style: none;
  position: relative;
}

section .listServices ul li {
  list-style: none;
  position: relative;
  padding-top: 1vh;
  font-size: 3vh;
  font-weight: 450;
}

#check {
  color: #D6000D;
  margin-right: 1vh;
}

section .listServices img {
  width: 450px;
  height: 400px;
}

form {
  position: relative;
  left: 50vh;
  top: 33vh;
}

form .callBack h3 {
  font-size: 3vh;
  padding-bottom: 1vh;
}

form input[type="tel"] {
  margin-top: 2rem;
  padding: 0.7rem;
  background: rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 0.9rem;
  font-weight: 300;
  border-radius: 5px;
}

form input::placeholder {
  color: gray;
  padding-left: 1vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
  font-weight: 500;
  font-size: 1.7vh;
}

form input[type="submit"] {
  margin-top: 2rem;
  margin-left: 1vh;
  padding: 0.7rem 2rem;
  background: #D6000D;
  color: white;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Serviços</title>
  <script src="https://use.fontawesome.com/releases/v5.14.0/js/all.js"></script>
  <link rel="stylesheet" href="style2.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
</head>

<body>

  <section>
    <div class="listServices">
      <ul>
        <li><i class="fas fa-check-circle" id="check"></i> Domínio personalizado</li>
        <li><i class="fas fa-check-circle" id="check"></i> Hospedagem</li>
        <li><i class="fas fa-check-circle" id="check"></i> Site responsivo</li>
        <li><i class="fas fa-check-circle" id="check"></i> Redes sociais</li>
        <li><i class="fas fa-check-circle" id="check"></i> Chat online</li>
        <li><i class="fas fa-check-circle" id="check"></i> Blog integrado</li>
      </ul>

      <img src="coding.png">

    </div>

    <form>

      <div class="callBack">
        <h3>Nossa equipe está à disposição!</h3> <br>

        <input type="tel" id="tel" class="tel" placeholder="Celular">
        <input type="submit" value="Ligamos para você">

      </div>

    </form>



</body>

</html>

1
  • o body ja é 100%/100%. acho que não precisa de {min-width: 100vh; min-height: 100vh;}
    – Sveen
    Commented 27/01/2021 às 15:39

1 Resposta 1

-2

Olá, tudo bem? Pra resolver problemas com responsividade vc deve usar media queries.

Por exemplo, você tem uma div com 1200px de width, se a sua tela tiver 1150px vai sobrar 50px de scroll horizontal.

Utilizando o exemplo abaixo, quando a sua tela estiver com 1200px ou menos a largura da div será alterada para 900px.

@media (max-width: 1200px){
    div{
        width: 900px;
    }
}

Com isso você consegue ficar alterando o estilo dos elementos para que eles encaixem de acordo com o tamanho da tela.

nesse site detalha melhor para você

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .