Avisos
Vaciar todo

[Resuelto] Hacer boton responsive

11 Respuestas
4 Usuarios
0 Reactions
135 Visitas
Respuestas: 359
Reputable Member
Topic starter
 

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


 
Respondido : 21/06/2019 1:16 am
Bulmaro
Respuestas: 4380
Famed Member Moderator
 

Hola Walter,

Añade la siguiente regla CSS:

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

Saludos.


 
Respondido : 21/06/2019 2:32 am
Respuestas: 359
Reputable Member
Topic starter
 

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


 
Respondido : 21/06/2019 6:25 am
Bulmaro
Respuestas: 4380
Famed Member 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.


 
Respondido : 21/06/2019 7:03 am
Bulmaro
Respuestas: 4380
Famed Member 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.


 
Respondido : 21/06/2019 7:03 am
Respuestas: 359
Reputable Member
Topic starter
 

Gracias, ya lo agregué. Saludos


 
Respondido : 23/06/2019 7:13 pm
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

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

Saludos.


 
Respondido : 23/06/2019 8:04 pm
Respuestas: 359
Reputable Member
Topic starter
 

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


 
Respondido : 06/07/2019 1:29 pm
Pepe
 Pepe
Respuestas: 41114
Illustrious Member 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


 
Respondido : 06/07/2019 4:28 pm
Respuestas: 359
Reputable Member
Topic starter
 

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

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

Gracias!!


 
Respondido : 06/07/2019 4:55 pm
Pepe
 Pepe
Respuestas: 41114
Illustrious Member 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


 
Respondido : 06/07/2019 5:16 pm