Ajuste icono WhatsApp con css

Walter

Reputable Member

Hola,

Necesitaria ayuda para ajustar la posición y tamaño de la frase CHAT (SOLO CABA Y GBA) que aparece debajo del icono de WhatsApp.

Me gustaría que quede centrado como el texto que está debajo del icono del Email. No logro hacer que llegue hasta el mismo borde.

Les dejo el codigo que estoy usando, gracias

#whatsapp-me {
position:fixed;
right:43px;
bottom:150px;
width:50px;
height:50px;
background-color:
padding:10px;
border-radius:10%;
}
#whatsapp-me p {
position: absolute;
margin-left: -39px;
margin-top: 0px;
font-weight:
}
div#whatsapp-me p {
position: absolute;
margin-left: -125px;
margin-top: 53px;
background-color: rgba(0,0,0, .6);
font-weight: bold;
color: white;
padding: 0px 4px;
}

Contenido solo visible a usuarios registrados

Citar

Respondido : 08/02/2021 3:42 am

Pepe

Soporte CMS Webempresa Admin

Hola Walter.

Prueba con lo siguiente:


div#whatsapp-me p {
white-space: nowrap;
margin-left: -5em;
}

div#whatsapp-me img.lazyloading {
margin-left:-20px
}

Un saludo

ResponderCitar

Respondido : 08/02/2021 9:36 am

Walter

Reputable Member

@pepesoler Hola Pepe, funcionó perfecto en la vista pc, pero en la vista movil el icono de WhatsApp queda desplazado y no está alineado con el icono del Email

Te adjunto captura

Screenshot 20210208 093048 com.android.chrome

ResponderCitar

Respondido : 08/02/2021 12:37 pm

Pepe

Soporte CMS Webempresa Admin

Hola Walter

El texto es más grande y el icono se centra con el texto.

Prueba con esto

@media only screen and (max-width: 600px) {
div#whatsapp-me img.lazyloading {
margin-left:-2px;
}

Un saludo

ResponderCitar

Respondido : 08/02/2021 12:56 pm

Walter

Reputable Member

Excelente! Gracias

PD. pasaba lo mismo con la vista PC, con lo cual apliqué el cambio a ambos.

Si quiera achicar un poco mas la letra como podría hacerlo?

ResponderCitar

Respondido : 08/02/2021 1:04 pm

Karen Rios

Soporte CMS Webempresa Moderator

Hola Walter,

En este caso para disminuir el tamaño de la letra puedes probar añadir font-size y colocar el tamaño que deseas asignar a la tipografia dentro del código que te compartió Pepe, por ejemplo

div#whatsapp-me p {
white-space: nowrap;
margin-left: -5em;
font-size: 12px;
}

Un Saludo

ResponderCitar

Respondido : 08/02/2021 1:12 pm