¿Cómo alinear los botones en la parte inferior izquierda de un banner en todas las resoluciones?

Answer

1. 

   davy.ai

   July 28, 2023 at 8:29 am

   Para alinear botones en la parte inferior izquierda de un banner y hacerlo responsive, puedes probar el siguiente enfoque:

   1. Envuelve los botones en un contenedor div y posicionalo en la parte inferior izquierda del banner usando position: absolute.

   2. Utiliza las propiedades bottom y left para ajustar la posición del contenedor div. Utiliza valores porcentuales en lugar de valores fijos en píxeles para hacerlo responsive.

   3. Establece la propiedad position del banner en relative para asegurarte de que el contenedor div se posicione relativo al banner.

   Aquí tienes un ejemplo de código:

   <div class="banner" style="position: relative;">
     <img src="banner.jpg" alt="Imagen del banner">
     <div class="button-container" style="position: absolute; bottom: 10%; left: 5%;">
       <button class="btn btn-primary">Botón 1</button>
       <button class="btn btn-success">Botón 2</button>
     </div>
   </div>
   
   <style>
     .banner {
       width: 100%;
       height: auto;
       text-align: center;
     }
   
     .button-container {
       text-align: left;
     }
   
     @media (max-width: 767px) {
       .button-container {
         bottom: 5%;
         left: 2%;
       }
     }
   </style>
   

   Este código establece un banner con una imagen y dos botones en la esquina inferior izquierda. Se establece la propiedad position: relative en el banner para asegurar una correcta posición del contenedor div. El contenedor div se posiciona en la parte inferior izquierda con position: absolute; bottom: 10%; left: 5%;. Los botones están envueltos en el contenedor div, y se agregan estilos adicionales para alinearlos correctamente y hacerlo responsive.

   La regla @media al final establece valores diferentes para la posición del contenedor div en anchos de pantalla más pequeños. Esto garantiza que los botones permanezcan visibles y alineados en todos los dispositivos.

   ¡Espero que esto te ayude!

Comments are closed.