Avisos
Vaciar todo

Ajuste icono WhatsApp con css  

 
Walter
 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
 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

Cursos Gratuitos WordPress

Walter
 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
 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

wpdoctor-revisa-la-salud-de-tu-wordpress

Walter
 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
 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

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress