Soporte » Guías – Resolución de problemas » Los botones se descolocan version movil y escritorio

  • Buenas tardes,

    En primer lugar gracias a las personas que vayais a dedicar unos minutos en ver mi problema. Estoy lanzando una landing page en WordPress para ofrecer unos productos. He pueso imagen unica y bajo la misma un botón. Bien pues después de volverme loco, conseguir desde «margin» agregar los margenes para que apareciese centrado, pero cual es mi sorpresa…

    Cuando accedo desde el móvil los botones no aparecen centrados y cuando he vuelto a la versión de escritorio tampoco, se habían movido y aunque meto manualmente de nuevo los margenes no los reconoce, ¿qué solución puede tener? Tan solo quiero que aparezca tanto para móvil como para ordenador el botón centrado.

    ¡Gracias!

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 15 respuestas - 1 de 15 (de 21 total)
  • Hola @cmramonleon

    Cuando dices que has puesto las imagenes con márgenes a que te refieres? Lo metiste con margenes tal cual?

    No sé tu codigo pero podrias probar a hacerlo de la siguiente forma (con css):

    @media only screen and (max-width: 300px){.qbutton.small{
           margin: 0px 0px 0px 41px;
      }
    }

    De esta forma conseguirás adaptarlo a tamaño movil con un ancho de 300px. He quitado los 90px que tenías en el margin-left y lo he puesto a 41px.

    PD: Yo evitaría hacerlo con margenes ya que casi siempre tendrás problemas para responsive pero prueba a meter el codigo que te he dicho, creo que te ayudará a salir del paso.

    ¡Muchísimas gracias @adriac96!

    Los márgenes se los he puesto a los botones porque por defecto al ponerlos quedaban pegados a la izquierda y la fotografía a la que acompañan está centrada. La única solución que encontré fue poner desde HTML esos margenes y de primeras se veía bien, después al acceder desde el móvil era un desastre y también desde el escritorio.

    Haré lo que me dices, pero perdona mi cuestión, ¿cómo accedo al css de esa landing page? porque yo lo máximo que he llegado hacer ha sido desde el editor, en vez de trabajar en visual composer o visual ha sido tocar el html, si me indicas cómo localizo ese css te lo agradecería, creo que tengo que ir a apariencia > personalizar, no? pero mi duda viene, ¿cómo localizo la página? ¡Mil gracias!

    Si, exacto.

    Tienes que ir a apariencia > personalizar > css adicional.

    El CSS de ahí es genérico. Con esto quiero decir que es para toda tu web. No se centra simplemente en esa landing page.

    Si tienes problemas para centrarlo, puedes pasarme el código y lo miro ya que voy un poco a ciegas jeje

    ¡Gracias!

    Esa era mi duda, gracias por la aclaración.

    ¿Entonces ahora elimino los margenes que metí a los botones y solo dejo ese codigo de css?

    Nota: Si elimino los margenes que yo habia dado desde el visual composer y desde html el codigo metido en css no hace nada.

    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.

    @adiac96 Este es el código que tengo para que se muestre la fotografía con el botón [qbutton size=»large» target=»_self» font_weight=»» text=»¡Hazte con él por 49,95€! Antes 80,00€» link=»https://www.ramonleon.es/contacto-promocion-rocio-2018/» margin=»0px 0px 0px 100px»][/vc_column][vc_column width=»1/2″][vc_single_image image=»3330″ img_size=»large» alignment=»center» onclick=»link_image» qode_css_animation=»»]

    Los margenes vienen como opción desde visual composer de los botones, porque la opción de posición para centrarlos o no, no aparece.

    De todas formas he pegado el codigo tal cual en css adicional y he publicado y no ha hecho efecto alguno… No sé qué paso estoy haciendo mal. ¡Gracias!

    Hola Ramón, prueba a hacer lo siguiente (no estoy seguro de si funcionará).

    Mete el boton en una <p id=»pruebaboton»></p> y ponle text-align: center;

    #pruebaboton{
         text-align: center;
    }

    Creo que debería de funcionar de esta forma.

    No pongas nada de lo que te dije y deja tu codigo tal cual tenías.

    @adric96 ¿elimino lo pegado al css? Mantengo entonces los margenes de cada boton?

    Gracias y disculpa que esté dando tanto trabajo

    Quítale el margin: 10px 10px 10px 90px (del botón que hay debajo de Virgen Rocio Pastora) y el mismo botón los metes en una etiqueta <p></p> con un id o clase y luego en el css le pones text-align: center;

    Si tienes problemas me puedes dar un usuario y contraseña (si quieres) y te lo miro en un momento.

    Y no te preocupes, todos hemos tenido problemas y hemos estado preguntando muchas veces en el foro 🙂

    Ya dirás si funciona, espero tu respuesta.

    Así te refieres @adric96 el boton quedaría así <p>¡Hazte con él por 49,95€! Antes 80,00€</p>

    Luego faltaría saber cómo meto ahí el tamaño, color y tamaño de la letra, el style vamos, pero no sé si lo puedo meter ahí o tengo que hacerlo en el css

    ¡Muchas gracias!
    Nota: Veo que el foro no deja publicar el código tal cual, p a clas «boton» a href enlace texto del boton cierro a y cierro p

    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.
    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.
    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.
    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.
    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.

    Si exacto, metes el botó en una <p> con la class botón. Ejemplo:

    <p class="boton"><a href=""></a></p>

    Y en el css:

    .boton{
    text-align: center;
    }

    En teoria no haría falta que metas ni color, ni tamaño de la letra ya que eso no lo pierdes.

    Voy actualizando y veo que tienes algún que otro problemilla. Me hes difícil saber como está la página sin ver el «backend».

    Yo si quieres puedo ayudarte si me das un usuario y contraseña. (Te paso un correo y me lo envias).

    Si no te fias (lo veo normal) podemos seguir intentándolo hasta que salga jeje

    <p class="boton_personalizado" href="ENLACE">¡Hazte con él ...</a></p>

    ¿Así? @adric96

    y en el css `.boton_personalizado{
    text-align: center;
    }`

    Si lo pongo así me sale ahora el boton en todo el ancho de la pagina, no respeta los margenes izquierdos aunque el texto si sale centrado.

    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.
    • Esta respuesta fue modificada hace 1 año, 1 mes por  Ramon Leon.

    No, así:

    <p class="boton_personalizado"><a href="ENLACE">¡Hazte con él...</a></p>

    Y CSS:

    .boton_personalizado{
    text-align: center;
    }
    • Esta respuesta fue modificada hace 1 año, 1 mes por  adriac96.
Viendo 15 respuestas - 1 de 15 (de 21 total)
  • El debate ‘Los botones se descolocan version movil y escritorio’ está cerrado a nuevas respuestas.