Text does not track responsiveness

Asked

Viewed 62 times

0

Could you explain why the text in the center of the image does not follow the responsiveness? What should I correct?

<body>
    <div class="inicio">

        <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
            <div class="container">
                <a class="navbar-brand h1 ml-3 mb-0" href="#">ThP</a>

                <button type="button" class="navbar-toggler btn btn-outline-secondary" data-toggle="collapse"
                    data-target="#navbarSite">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse justify-content-end" id="navbarSite">

                    <ul class="nav navbar-nav mb-0">
                        <li class="nav-item mr-2 mb-0 border-bottom border-success">
                            <a class="nav-link text-dark" href="#">Início</a>
                        </li>
                        <li class="nav-item mr-2 border-bottom border-success">
                            <a href="#" class="nav-link text-dark">Sobre mim</a>
                        </li>
                        <li class="nav-item mr-2 border-bottom border-success">
                            <a href="#" class="nav-link text-dark">Hobbies</a>
                        </li>
                        <li class="nav-item mr-2 border-bottom border-success">
                            <a href="#" class="nav-link text-dark">Portfólio</a>
                        </li>
                        <li class="nav-item mr-2 border-bottom border-success">
                            <a href="#" class="nav-link text-dark">Contato</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="capa">
            <img src="img\cover.jpg" class="img-fluid">
        </div>

        <div class="caption tect-center">
            <h3>Lorem Ipsum!</h3>
            <h2>Lorem Ipsum</h2>
        </div>

</div>



body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    color: blue;
}

.caption{
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 35%;
    z-index: 1;
    color: aqua;
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
}

@media only screen and (max-width: 400px){
    .caption h3{
        font-size: 4vw;
        color: red;
        font-weight: bolder;
    }
    .caption h2{
        font-size: 4vw;
        color: red;
        font-weight: bolder;
    }

}
html css twitter-bootstrap

  • What do you mean, "it doesn’t follow the response" ? Here it is normal, the text in the center of the screen... what did you expect from the behavior of this text? What’s the problem you’re having there?

  • @hugocsl, I think his problem is when you resize the browser, and it gets 400px wide and less than 400px high the text no longer stays in the center and ends up creating a scroll because the menus are on top.

  • @Leandronascimento that’s right, the text is centered when the browser is normal, but below 400px the text does not remain in the center of the screen as it should, the text starts to break and descend. My intention is the text to follow the size of the image and screen and the menu does not influence the position.

1 answer

2


You can put the div="caption" in position: absolute also add propertiesleft: 50% and top: 50% and to stay perfectly in the center place the property transform: translateX(-50%) translateY(-50%); so when you resize the browser both horizontally and vertically to div="caption" will remain in the center.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
  
  body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Lato', sans-serif;
    color: blue;
}

.caption{
    width: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 1;
    color: aqua;
    text-transform: uppercase;
    text-align: center;
    font-size: 30px;
}

@media only screen and (max-width: 400px){
    .caption h3{
        font-size: 4vw;
        color: red;
        font-weight: bolder;
    }
    .caption h2{
        font-size: 4vw;
        color: red;
        font-weight: bolder;
    }

}

  </style>
</head>
<body>
  <div class="inicio">

      <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
          <div class="container">
              <a class="navbar-brand h1 ml-3 mb-0" href="#">ThP</a>

              <button type="button" class="navbar-toggler btn btn-outline-secondary" data-toggle="collapse"
                  data-target="#navbarSite">
                  <span class="navbar-toggler-icon"></span>
              </button>

              <div class="collapse navbar-collapse justify-content-end" id="navbarSite">

                  <ul class="nav navbar-nav mb-0">
                      <li class="nav-item mr-2 mb-0 border-bottom border-success">
                          <a class="nav-link text-dark" href="#">Início</a>
                      </li>
                      <li class="nav-item mr-2 border-bottom border-success">
                          <a href="#" class="nav-link text-dark">Sobre mim</a>
                      </li>
                      <li class="nav-item mr-2 border-bottom border-success">
                          <a href="#" class="nav-link text-dark">Hobbies</a>
                      </li>
                      <li class="nav-item mr-2 border-bottom border-success">
                          <a href="#" class="nav-link text-dark">Portfólio</a>
                      </li>
                      <li class="nav-item mr-2 border-bottom border-success">
                          <a href="#" class="nav-link text-dark">Contato</a>
                      </li>
                  </ul>
              </div>
          </div>
      </nav>

      <div class="capa">
          <img src="img\cover.jpg" class="img-fluid">
      </div>

      <div class="caption tect-center">
          <h3>Lorem Ipsum!</h3>
          <h2>Lorem Ipsum</h2>
      </div>

</div>
</html>

  • It worked @Le248dev, thank you very much!

Browser other questions tagged html css twitter-bootstrap

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