Avisos
Vaciar todo

Ajuste icono WhatsApp con css

6 Respuestas
3 Usuarios
0 Reactions
13 Visitas
Respuestas: 359
Reputable Member
Topic starter
 

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


 
Respondido : 08/02/2021 3:42 am
Pepe
 Pepe
Respuestas: 41113
Illustrious Member 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


 
Respondido : 08/02/2021 9:36 am
Respuestas: 359
Reputable Member
Topic starter
 

@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

 
Respondido : 08/02/2021 12:37 pm
Pepe
 Pepe
Respuestas: 41113
Illustrious Member 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

 


 
Respondido : 08/02/2021 12:56 pm
Respuestas: 359
Reputable Member
Topic starter
 

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?


 
Respondido : 08/02/2021 1:04 pm
Karen Rios
Respuestas: 18663
Illustrious Member 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


 
Respondido : 08/02/2021 1:12 pm