0

estoy intentando juntar dos botones en el footer, pero estos no se adaptan a la pantalla, no son responsive, cuando la pantalla es pequeña los botones quedan fuera de esta, además no logro dejarlos juntos. mi codigo:

 <center><a style='position: absolute; color: #000; background: #fff; bottom:0; padding: 10px; width: 145px; text-align: center; border: solid 1px #000; margin-left: -195px; border-radius: 5px;'>LLAMAR<a style='position: absolute; color: #fff; background: #000; bottom:0; padding: 10px; width: 145px; text-align: center;  border: solid 1px #000; margin-left: -15px; border-radius: 5px;'>CHAT</a></a></center>

lo que quiero lograr:

introducir la descripción de la imagen aquí

1
  • ¿Porque pones un elemento <a> dentro de un elemento <a>?
    – enxaneta
    el 6 oct. 2018 a las 15:52

2 respuestas 2

2

Para que sean responsive, el ancho debería ser en % y no fijo en px. Sería buena práctica que utilices clases para definir el formato común de ambos, asi como tambien para lo particular.

<style>
.my-btn{
  position: absolute; bottom:0; padding: 10px; width: 40%; text-align: center; border: solid 1px #000;  border-radius: 5px;
}

.btn-llamar {
  color: #000; background: #fff;  margin-left: -195px;
}

btn-chat { 
  color: #fff; background: #000; margin-left: -15px;
}
</style>

<center>
<a class="my-btn btn-llamar">LLAMAR</a><a class="my-btn btn-chat" >CHAT</a></center>
1

Hice un pequeño condigo para que te guíes; primero cree una capa con la clase container con un alto de 300px para emular tu body y posicionar el footer en la parte de abajo de la página o en este caso en la capa con al clase container. Luego cree un footer para emular tu ejemplo donde dices que lo que tratas de hacer esta en el pie de tu página; y por último cree los dos botones los cuales les hice unas pequeñas modificaciones en el css para que sean responsive:

1) Le removi el atributo position:absolute.

2) A los dos botones el atributo width de los coloque por porcentaje para que se adapte mejor a cualquier resolución, por px se quedan estáticos.

3) A los dos botones les coloque la propiedad display:inline-block; para que sean tratados como texto y el footer los puedas centrar sin usar el margin-left y el margin-right que tu tenias; al footer le agregue la propiedas text-alig:center para que siempre centrara los dos botones automáticamente sin importar la resolución de la pantalla. Con esto te quitas la etiqueta center la cual ya esta deprecated o en desuso para html5.

4) A los botones les coloque una propiedad font-size:3vw, donde al colocar vw como unidad de medida le esta indicando que se adapte según la resolución de la pantalla.

Puedes ejecutar el código y para verlo funcionar al darle ejecutar hay una opción que se muestra después en la parte inferior derecha llamada Página completa, le das allí y ahí puedes probar minimizando el navegador para que veas como se va adaptando. Espero que se lo que andas buscando.

.container{
  border:1px solid blue;
  height:300px;
  position:relative;
}

footer{
 border: 1px solid red;
 bottom:0px;
 position:absolute;
 text-align:center;
 width:100%;
}

.llamar,
.chat{
  border: solid 1px #000;
  border-radius: 5px;
  display:inline-block;
  font-size:3vw;
  padding:10px;
  text-align: center;
  width:20%;
}

.llamar{
  background-color:#fff;
  color:#000;
}

.chat{
  background-color:#000;
  color:#fff;
}
<div class="container">
  <footer>
    <a class="llamar">LLAMAR</a>
    <a class="chat">CHAT</a>
  </footer>
</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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