Problems with HTML/CSS responsiveness

Asked

Viewed 51 times

0

I am a beginner and I am venturing into the world of Web development. I’m having trouble applying responsiveness to the pages, it’s always ~left~ space on the body (a horizontal scroll bar appears) and when I change the screen the alignment of the components always looks different. This is my first question on the platform, so I now ask forgiveness if the following code does not provide the necessary information. Thank you for your attention

* {
  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>

css responsive-layout

  • body is already 100%/100%. I don’t think you need {min-width: 100vh; min-height: 100vh;}

1 answer

-2

Hello, all right? To solve problems with responsiveness you must use media queries.

For example, you have a div with 1200px width, if your screen has 1150px will remain 50px horizontal scroll.

Using the example below, when your screen is 1200px or less the width of the div will be changed to 900px.

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

With this you can keep changing the style of the elements so that they fit according to the screen size.

on this site details better for you

Browser other questions tagged css responsive-layout

You are not signed in. Login or sign up in order to post.