Soporte » Guías – Resolución de problemas » Centrar Mailchimp Form / Titulo y Boton

  • camiloms

    (@camiloms)


    Excelente dia Comunidad de WordPress. Requiero por favor de su apoyo en la solución para centrar el boton y titulo del plugin del formulario de Mailchimp, dado que le agregue un css pero solo me centro todo el formulario pero el titulo y el boton me los dejo alineados a la izquierda. Muchas gracias.

    Anexo por acá detalle del CSS aplicado:

    .mc4wp-form {
    width: 40%;
    display: block;
    margin: auto;
    text-align: center;
    }

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Bienvenido al foro de soporte de WordPress.org. Te dejo el enlace a las Instrucciones de uso de los foros, ahí tienes explicada, entre otras cosas, la forma correcta de hacer una consulta. Si la consulta se refiere a una web específica tienes que indicar la URL de la página, no te podemos ayudar con el CSS sin ver la fuente.

    Hola,

    Tenía problemas para centrar en texto del formulario de Mailchimp que uso en mi web. Probé con el CSS que indica Camiloms, pero cambiando width: 40%; a width: 60%;.

    Con el valor a 40% se ve genial en ordenador, pero mal en dispositivos móviles.

    ¿Existe alguna manera de que quede bien centrado en ambos, ordenador y móviles?

    Esta es mi web: https://rojohueso.com/

    Moderador Jose Luis

    (@jose64)

    Hola @rojohueso

    Bienvenido al foro de soporte. Para usar diferentes valores de acuerdo al dispositivo tienes que usar CSS media queries, te dejo información al respecto:

    CSS media queries

    Responsive Web Design – Media Queries

    Resumiendo lo que sucede es que estás dando un valor global para todos los tamaños de pantalla, 40% y para que se aplique solo en los tamaños grandes deberías añadir algo como esto:

    @media (min-width: 992px)
    .mc4wp-form {
        width: 60%;
    }

    Eso quiere decir que para tamaños superiores a 992px el ancho será 60%, para los tamaños menores lo puedes definir como ancho completo con esta otra:

    @media (max-width: 991px)
    .mc4wp-form {
        width: 100%;
    }

    Hola @jose64,

    Muchas gracias por tu respuesta y ayuda.

    He estado probando, y finalmente he conseguido que funcione en ambos dispositivos con este CSS:

    `.mc4wp-form {
    width: 40%;
    display: block;
    margin: auto;
    text-align: center;
    }

    @media screen and (max-width: 767px) {
    .mc4wp-form {
    width: 100%;
    display: block;
    margin: auto;
    text-align: center;
    }`

Viendo 4 respuestas - de la 1 a la 4 (de un total de 4)
  • Debes estar registrado para responder a este debate.