1

Estoy utilizando una imagen con las dimensiones 1980 x 780 estableciéndola como background y desde el CSS la achico y coloco un alto máximo. Dentro de la imagen coloqué un buscador, debajo de ella una línea de texto y un botón. Al momento de querer testear su desempeño responsive me encuentro con qué los elementos se desbordan al igual que una línea inferior como margen. Estos mismos no siguen el estilo inicial que me gustaría respetar.

Estoy repitiendo el mismo error que consulté en otra ocasión. Traté de no repetir en esta ocasión esa misma línea de código qué impedía que la imagen y su contenido estuvieran juntos pero algo se me debe haber pasado y no encuentro su fallo.

Esta línea la elimine pero algo más se me paso creo.

  • background-position: center center;

@import url('https://fonts.googleapis.com/css2? family=Roboto:wght@700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  font-weight: 550;
  min-height: 100%;
  background-color: #141414;
}


/* ------------- SCROLLBAR ------------- */

body::-webkit-scrollbar {
  height: 1.5px;
  width: 6.5px;
  background-color: #000000;
}

body::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2.5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #acacac;
  border-radius: 2.5px;
}


/* ------------- ELIMINAR SUBRAYADO ------------- */

a:link,
a:visited {
  text-decoration: none;
}

.grid-container>* {
  border-radius: 4px;
  padding: 1px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #232d35;
  width: 100%;
  height: max-content;
}

.grid-container {
  display: grid;
  gap: 5px;
  grid-template: "header" 70px "main" auto "navbar" 50px "footer" 100px;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template: "navbar header" 65px "main  main" auto "footer  footer" 100px / 200px auto;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template: "navbar  header  header" 55px "main    main    main" auto "footer  footer  footer" 100px / 200px auto 200px;
  }
}


/* -----------------  ENCABEZADO  ----------------- */

.header {
  padding-top: 1.2%;
  grid-area: header;
  display: flex;
  border-radius: 0 0 0 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #4c5672;
  border-left: 2.5px solid #EEE7CE;
  border-bottom: 2.5px solid #EEE7CE;
  margin-left: 2%;
}

.header .logo {
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 450;
  color: white;
  white-space: nowrap;
}

.header .logo i {
  display: inline-flex;
  color: #b884c4;
  font-size: 1.9rem;
}

.header .logoLupa {
  color: rgb(255, 255, 255);
  margin-left: 55%;
  font-size: 1.4rem;
}

.header .logoHeart {
  color: rgb(255, 255, 255);
  margin-left: 3%;
  font-size: 1.7rem;
  margin-top: -.3%;
}

.header .icons div,
.header .icons a {
  font-size: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  color: #ffffff;
  display: inline;
}

.header .icons div:hover,
.header .icons a:hover {
  color: #c228ff;
}

.header .menu-button {
  background-color: transparent;
  color: white;
  margin-left: 170%;
  margin-top: -15%;
  font-size: 1.7rem;
  cursor: pointer;
  border: transparent;
}

.header .right-menu {
  position: relative;
  display: inline-block;
}


/* -----------------  CONTENIDO  PÁGINA  ----------------- */

.main {
  grid-area: main;
  background-color: #0f1214;
}

.main .row3 {
  background: url(https://lightiscrown.com/wp-content/uploads/2018/05/1920x780.png) no-repeat;
  background-size: cover;
  margin-right: auto;
  margin-left: auto;
  background-size: 100%;
  min-height: 55vh;
  max-height: 55vh;
  border-bottom: #EEE7CE 1px solid;
  text-align: center;
}

.row3 .btn {
  margin-top: 3.25%;
  margin-left: auto;
  margin-right: auto;
  padding: .80rem 1.5rem;
  border-radius: .65rem;
  color: #ffffff;
  background: #558486;
  border: 1.5px solid #00000000;
  font-size: 1.15rem;
  cursor: pointer;
  font-weight: 550;
  text-decoration: none;
}

.input-box {
  position: relative;
  height: 76px;
  max-width: 900px;
  width: 100%;
  background: #fff;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.input-box i,
.input-box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.input-box i {
  left: 20px;
  font-size: 30px;
  color: #707070;
}

.input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  padding: 0 155px 0 65px;
  border-radius: 8px;
  background-color: transparent;
}

.input-box .button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  background-color: #785586;
  cursor: pointer;
}

.input-box .button.clicked {
  transform: translateY(-50%) scale(0.98);
}


/* Responsive BUSCADOR */

@media screen and (max-width: 500px) {
  .input-box {
    height: 66px;
    margin: 0 8px;
    border-radius: 8px;
  }
  .input-box i {
    left: 12px;
    font-size: 25px;
  }
  .input-box input {
    padding: 0 112px 0 50px;
  }
  .input-box .button {
    right: 12px;
    font-size: 14px;
    padding: 8px 18px;
  }
}

@media (max-width: 765px) {
  .main .row3 {
    font-size: 2rem;
  }
  .main .row3 .btn {
    font-size: 0.8rem !important;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ===== Iconscout CSS ===== -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
  </script>
  <link rel="stylesheet" href="styleSearchBox.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>

<body class="grid-container">

  <!----------- ENCABEZADO ----------->
  <header class="header">
    <a href="/" class="logo"> <i class="uil uil-book-alt"></i> Biblioteca</a>




    <!-- MAL POSICIONADOS - SE DESBORDAN DEL BORDE DERECHO AL PROBAR RESPONSIVE -->

    <!-- <a href="/exploreBooksPublic" class="logoLupa"> <i class="fa-solid fa-magnifying-glass"></i></a>

        <a href="#" class="logoHeart"> <i class="uil uil-heart"></i></a>

        <div class="loggedin">
            <div class="wrapper">
                <div class="right-menu">
                    <a class="btn btn-warning" href="/login" role="button">Acceder</a>
                </div>
            </div>
        </div> -->
  </header>







  <!----------- CONTENIDO PRINCIPAL ----------->
  <article class="main">
    <div class="row3">
      <div class="content">
        <h3 style="color: rgba(0, 0, 0, 0);"></h3><br></br>
      </div>

      <form action="/buscarLibro" method='post' style="margin-top: 3%;">
        <div class="input-box" style="margin-left: auto; margin-right: auto;">
          <i class="uil uil-search"></i>
          <input name="search" type="text" placeholder="Buscar libro..." />
          <button type="submit" class="button">Buscar</button>
        </div>
        <span style="color: rgb(233, 233, 233); font-size: medium;">Títulos - Autores - Editoriales -
                    IESBN</span>
      </form>
      <a href="/registrarLibros" class="btn btn-link">
        <i class="uil uil-book-alt"></i> Registrar Libro
      </a>
    </div>
  </article>


</body>

</html>

1 respuesta 1

1

Los elementos nunca se desbordan de su contenedor, ellos siempre se mantienen dentro, el problema es con la imagen, que por tener un ancho del 100%, al achicar la pantalla, su altura se adaptará a ese ancho, haciendo que su altura disminuya, dejando un espacio en la parte inferior.

La solución sería comentar la línea donde hace el ancho del 100% y posicionar siempre al centro la imagen:

.main .row3 {
  background: url(https://lightiscrown.com/wp-content/uploads/2018/05/1920x780.png) no-repeat;
  background-size: cover;
  background-position: center center; /* posiciono al centro la imagen para que no se desborde */
  margin-right: auto;
  margin-left: auto;
  /* background-size: 100%; */ /* quito el ancho del 100% que tenía */
  min-height: 55vh;
  max-height: 55vh;
  border-bottom: #EEE7CE 1px solid;
  text-align: center;
}

Código:

@import url('https://fonts.googleapis.com/css2? family=Roboto:wght@700&display=swap');
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-size: 1.2rem;
  font-weight: 550;
  min-height: 100%;
  background-color: #141414;
}


/* ------------- SCROLLBAR ------------- */

body::-webkit-scrollbar {
  height: 1.5px;
  width: 6.5px;
  background-color: #000000;
}

body::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 2.5px;
}

body::-webkit-scrollbar-thumb:hover {
  background: #acacac;
  border-radius: 2.5px;
}


/* ------------- ELIMINAR SUBRAYADO ------------- */

a:link,
a:visited {
  text-decoration: none;
}

.grid-container>* {
  border-radius: 4px;
  padding: 1px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #232d35;
  width: 100%;
  height: max-content;
}

.grid-container {
  display: grid;
  gap: 5px;
  grid-template: "header" 70px "main" auto "navbar" 50px "footer" 100px;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template: "navbar header" 65px "main  main" auto "footer  footer" 100px / 200px auto;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template: "navbar  header  header" 55px "main    main    main" auto "footer  footer  footer" 100px / 200px auto 200px;
  }
}


/* -----------------  ENCABEZADO  ----------------- */

.header {
  padding-top: 1.2%;
  grid-area: header;
  display: flex;
  border-radius: 0 0 0 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background: #4c5672;
  border-left: 2.5px solid #EEE7CE;
  border-bottom: 2.5px solid #EEE7CE;
  margin-left: 2%;
}

.header .logo {
  display: inline-flex;
  font-size: 1.35rem;
  font-weight: 450;
  color: white;
  white-space: nowrap;
}

.header .logo i {
  display: inline-flex;
  color: #b884c4;
  font-size: 1.9rem;
}

.header .logoLupa {
  color: rgb(255, 255, 255);
  margin-left: 55%;
  font-size: 1.4rem;
}

.header .logoHeart {
  color: rgb(255, 255, 255);
  margin-left: 3%;
  font-size: 1.7rem;
  margin-top: -.3%;
}

.header .icons div,
.header .icons a {
  font-size: 1.5rem;
  margin-left: auto;
  cursor: pointer;
  color: #ffffff;
  display: inline;
}

.header .icons div:hover,
.header .icons a:hover {
  color: #c228ff;
}

.header .menu-button {
  background-color: transparent;
  color: white;
  margin-left: 170%;
  margin-top: -15%;
  font-size: 1.7rem;
  cursor: pointer;
  border: transparent;
}

.header .right-menu {
  position: relative;
  display: inline-block;
}


/* -----------------  CONTENIDO  PÁGINA  ----------------- */

.main {
  grid-area: main;
  background-color: #0f1214;
}

.main .row3 {
  background: url(https://lightiscrown.com/wp-content/uploads/2018/05/1920x780.png) no-repeat;
  background-size: cover;
  background-position: center center; /* posiciono al centro la imagen para que no se desborde */
  margin-right: auto;
  margin-left: auto;
  /* background-size: 100%; */ /* quito el ancho del 100% que tenía */
  min-height: 55vh;
  max-height: 55vh;
  border-bottom: #EEE7CE 1px solid;
  text-align: center;
}

.row3 .btn {
  margin-top: 3.25%;
  margin-left: auto;
  margin-right: auto;
  padding: .80rem 1.5rem;
  border-radius: .65rem;
  color: #ffffff;
  background: #558486;
  border: 1.5px solid #00000000;
  font-size: 1.15rem;
  cursor: pointer;
  font-weight: 550;
  text-decoration: none;
}

.input-box {
  position: relative;
  height: 76px;
  max-width: 900px;
  width: 100%;
  background: #fff;
  margin: 0 20px;
  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.input-box i,
.input-box .button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.input-box i {
  left: 20px;
  font-size: 30px;
  color: #707070;
}

.input-box input {
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 18px;
  font-weight: 400;
  border: none;
  padding: 0 155px 0 65px;
  border-radius: 8px;
  background-color: transparent;
}

.input-box .button {
  right: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 6px;
  background-color: #785586;
  cursor: pointer;
}

.input-box .button.clicked {
  transform: translateY(-50%) scale(0.98);
}


/* Responsive BUSCADOR */

@media screen and (max-width: 500px) {
  .input-box {
    height: 66px;
    margin: 0 8px;
    border-radius: 8px;
  }
  .input-box i {
    left: 12px;
    font-size: 25px;
  }
  .input-box input {
    padding: 0 112px 0 50px;
  }
  .input-box .button {
    right: 12px;
    font-size: 14px;
    padding: 8px 18px;
  }
}

@media (max-width: 765px) {
  .main .row3 {
    font-size: 2rem;
  }
  .main .row3 .btn {
    font-size: 0.8rem !important;
  }
}
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- ===== Iconscout CSS ===== -->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous">
    </script>
    <link rel="stylesheet" href="styleSearchBox.css">
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  </head>

  <body class="grid-container">
    <!----------- ENCABEZADO ----------->
    <header class="header">
      <a href="/" class="logo"> <i class="uil uil-book-alt"></i> Biblioteca</a>
      <!-- MAL POSICIONADOS - SE DESBORDAN DEL BORDE DERECHO AL PROBAR RESPONSIVE -->

      <!-- <a href="/exploreBooksPublic" class="logoLupa"> <i class="fa-solid fa-magnifying-glass"></i></a>

        <a href="#" class="logoHeart"> <i class="uil uil-heart"></i></a>

        <div class="loggedin">
            <div class="wrapper">
                <div class="right-menu">
                    <a class="btn btn-warning" href="/login" role="button">Acceder</a>
                </div>
            </div>
        </div> -->
    </header>
    <!----------- CONTENIDO PRINCIPAL ----------->
    <article class="main">
      <div class="row3">
        <div class="content">
          <h3 style="color: rgba(0, 0, 0, 0);"></h3><br></br>
        </div>
        <!-- Modifiqué aquí un poco tu buscador -->
        <form action="/buscarLibro" class="d-flex justify-content-center align-items-center flex-column m-4" method='post' style="margin-top: 3%;">
          <div class="input-box mb-4">
            <i class="uil uil-search"></i>
            <input name="search" type="text" placeholder="Buscar libro..." />
            <button type="submit" class="button">Buscar</button>
          </div>
          <span style="color: rgb(233, 233, 233); font-size: medium;">Títulos - Autores - Editoriales - IESBN</span>
        </form>
        <a href="/registrarLibros" class="btn btn-link">
          <i class="uil uil-book-alt"></i> Registrar Libro
        </a>
      </div>
    </article>
  </body>
</html>

Puedes ver mejor los resultados en este enlace.

3
  • Excelente Cris, ahora lo coloco en mi sistema con tus arreglos. Una consulta como puedo hacer para que al achicar la pantalla no sea tan alta sus dimensiones y mantenga esa altura del principio? Porque estoy probando acá con los min y max height y solo lo conseguiría achicando el tamañao inicial pero yo quiero mantener ese tamaño al correr el código. Probe hasta colocando una imagen super pequeña y tambien al achicar la pantalla esta misma toma una altura muy grande
    – Lucas
    el 11 mar. 2023 a las 20:25
  • Cuando puedas @Cris223511.dev revisa mi duda. Estuve buscando info pero no encontré resultados que me lo solucionen al problema del ancho de la imagen al achicar la pantalla
    – Lucas
    el 12 mar. 2023 a las 16:50
  • Hola estimado, recuerda que puedes realizar otra pregunta si es que tienes otro nuevo problema para así poder reproducirlo y explicarte con mayor exactitud, de lo contrario mi respuesta perdería sentido, saludos. el 12 mar. 2023 a las 17:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.