Avisos
Vaciar todo

[Resuelto] Hacer boton responsive  

 
Walter
 Walter
Reputable Member

Hola,

Necesito hacer responsive un boton que uso en toda mi web.
Hace un tiempo hice este pedido y me sugiriereon agregar este codigo en custom css, lo que hice pero no ha resultado en todos los casos, como veran en el print screen que adjuto

@media only screen and (max-width: 600px) {
#boton-calcular {
font-size:11px}
}

Habra alguna forma de hacer este boton realmente responsive y que se adapta a todas las pantallas moviles?

Gracias

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 21/06/2019 2:16 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

Añade la siguiente regla CSS:

@media only screen and (max-width: 299px){
 #boton-calcular {
    font-size: 10px;
    padding: 12px;
  }
}

Saludos.

ResponderCitar
Respondido : 21/06/2019 3:32 am

Walter
 Walter
Reputable Member

Borro el codigo anterior y lo reemplazo por este o simplemente lo agrego?

Con este cambio el boton sera siempres responsive sin importar el largo del texto?

Gracias

ResponderCitar
Respondido : 21/06/2019 7:25 am
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

Agrégalo, no reemplaces ni modifiques el anterior.

Con este cambio el boton sera siempres responsive sin importar el largo del texto?

Ello depende de la programación de otros elementos que son parte de la plantilla WP Trust, lo ideal es contactar a lo creadores -> https://themeforest.net/user/cmssuperheroes/portfolio?ref=kirhero&clickthrough_id=1408319774&redirect_back=true

Por otra parte, los elementos HTML tipo botón no han sido creados para contener textos largos. Si el texto es extenso de tal manera que el mismo se deforma una opción sería usar otros elementos con estilos CSS de botón.

Saludos.

ResponderCitar
Respondido : 21/06/2019 8:03 am

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

Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

Hola Walter,

Agrégalo, no reemplaces ni modifiques el anterior.

Con este cambio el boton sera siempres responsive sin importar el largo del texto?

Ello depende de la programación de otros elementos que son parte de la plantilla WP Trust, lo ideal es contactar a lo creadores -> https://themeforest.net/user/cmssuperheroes/portfolio?ref=kirhero&clickthrough_id=1408319774&redirect_back=true

Por otra parte, los elementos HTML tipo botón no han sido creados para contener textos largos. Si el texto es extenso de tal manera que el mismo se deforma una opción sería usar otros elementos con estilos CSS de botón.

Saludos.

ResponderCitar
Respondido : 21/06/2019 8:03 am
Walter
 Walter
Reputable Member

Gracias, ya lo agregué. Saludos

ResponderCitar
Respondido : 23/06/2019 8:13 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Actualmente ya veo el botón correctamente en modo responsive
Entiendo que ya solucionaste tu problema.

Saludos.

ResponderCitar
Respondido : 23/06/2019 9:04 pm
Walter
 Walter
Reputable Member

Hola,

A pesar de los cambios, sigo viendo el boton mal desde algunos dispositivos.

En una de tus respuestas me decias que este boton no estaba hecho para textos largos al ser un call tu action

Me podrias dar por favor algun codigo css para emular este boton que creé pero que sea realmente responsive?
Gracias

ResponderCitar
Respondido : 06/07/2019 2:29 pm

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

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Walter.

Lo veo bien:

Se adapta segun la resolucion del dispositivo:
.- prueba utilizando otro navegador o accediendo en incognito:
-> https://support.google.com/chrome/answer/95464?co=GENIE.Platform%3DDesktop&hl=es

Un saludo

ResponderCitar
Respondido : 06/07/2019 5:28 pm
Walter
 Walter
Reputable Member

Ese url si, pero hay otros que no. Te dejo un ejemplo

https://estudiowls.com.ar/calculadora-indemnizacion-despido-trabajo-en-negro

Gracias!!

ResponderCitar
Respondido : 06/07/2019 5:55 pm

Cursos Gratuitos WordPress

Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Walter.

Lo veo igual, se redimensiona bien:

El codigo que paso Bulmaro es para todos los elementos con la clase #boton-calcular

Tando el botón anterior como el que indicas ahora tienen la misma clase i] #boton-calcular así que si funciona en una entrada tiene que funcionar para las demás.

El problema por lo que veo es de cache de navegador.

Si utilizas Chrome puedes instalar la siguiente extension:
-> https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ca

Una vez instalada, cada vez que pulses en el icono de la extensión se elimina la cache del navegador.

Un saludo

ResponderCitar
Respondido : 06/07/2019 6:16 pm