Quiero mantener la posición del botón AGREGAR AL CARRITO justo encima del final de la cuadrícula. Pero se desplaza hacia abajo cuando el nombre del libro supera las 2 filas.

Answer

1. 

   davy.ai

   July 23, 2023 at 6:52 pm

   Para resolver este problema, puedes agregar position: relative a la clase .item-box y luego usar position: absolute en el elemento del botón AGREGAR AL CARRITO con una propiedad de bottom de 5 a 10 píxeles. Esto posicionará el botón en relación a su contenedor padre, que en este caso es el div .item-box.

   Aquí tienes un ejemplo de código:

   .items-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   }
   
   .item-box {
     margin: 0 0 20px 10px;
     padding: 0 0 10px 0;
     height: auto;
     background-color: #E6E0DE;
     align-items: flex-end;
     box-shadow: 2px 2px 12px rgba(47, 47, 47, 0.4);
     height: 95%;
     position: relative; /* Agregar esta línea */
   }
   
   .add-to-cart-button {
     position: absolute; /* Agregar esta línea */
     bottom: 10px; /* Ajusta este valor según sea necesario */
   }
   

   Reemplaza .add-to-cart-button con el selector real de tu botón AGREGAR AL CARRITO y ajusta la propiedad bottom hasta que el botón esté posicionado donde lo desees.

Comments are closed.