Problemas con el ancho de página

  • Resuelto muttmotorcyclesspain

    (@muttmotorcyclesspain)


    hace 1 año, 7 meses

    Buenas!

    Por algun motivo, no consigo que el ancho de la página quede como tiene que ir por defecto (es como que el ancho está mas estrecho de lo normal). Entiendo que es porque en algún momento se ha fijado en el tema para ese ancho establecido pero no consigo ver la Linea de código que lo está estrechando (a parte de que no entiendo mucho de ello)

    Por descartar todos los intentos, no creo que sea un tema responsive porque en dispositivo móvil y en otros dispositivos la pagina se ve también mal (estrecha le contenido de la pagina y no lo adapta al ancho total). No solo pasa en el CARRITO sino también en el CHECKOUT de WOOCOMMERCE. Creo que el principal problema reside en el tema que se está usando (KAVA CHILD) y el estilo, pero desconozco código como para ponerme a tocar en el editor y hacer un destrozo mayor. lo curioso es que desde el editor del ELEMENTOR se ve todo correctamente…

    Alguien podría echarme un cable? Muchas gracias de antemano

    View post on imgur.com

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

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    El problema es esta regla:

    .woocommerce-cart .woocommerce .woocommerce-cart-form {
  width: 65%;
}

    Cambia la anchura al 100 %

    Iniciador del debate muttmotorcyclesspain

    (@muttmotorcyclesspain)

    hace 1 año, 7 meses

    Buenas!

    Muchas gracias por la ayuda. Ha funcionado para cambiar el CARRITO pero no el CHECKOUT. Lo he metido cómo Linea de código en el CSS personalizado del tema ¿es la manera correcta de hacerlo?

    la parte del CHECKOUT siguiendo tus indicaciones la he arreglado asi también:

    /* Estrecha checkout y cart de woocomerce */
    .woocommerce-cart .woocommerce .woocommerce-cart-form {
    width: 100%;
    }

    body.woocommerce-checkout .woocommerce {
    max-width: 95% !important;
    }

    es correcto o se podría expresar de otra forma?

    Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    Apariencia > Personalizar > CSS adicional. Aquí es donde debe ir por ser la forma más sencilla de hacerlo.

    La solución que te he dado no funciona del todo bien. En versión para el movil se queda parte del texto oculto y desde fuera es complicado ver cuál sería la opción adecuada.

    Tienes que revisar bien esa sección. Por lo que veo es una tabla. tal vez deberías hacerlo con «div» que siempre es más fácil ajustar para distintos dispositivos.

    Haz primero las correcciones para PC y luego compruebas para móvil. Si queda algo mal, deberás usar @media para ajustarlo a distintos dispositivos.

    Iniciador del debate muttmotorcyclesspain

    (@muttmotorcyclesspain)

    hace 1 año, 7 meses

    buenas

    Nada he probado pero no me queda ajustado en movil. El código final que estoy metiendo es el siguiente:

    /* Estrecha checkout y cart de woocomerce */
    .woocommerce-cart .woocommerce .woocommerce-cart-form {
    width: 100%;
    }

    body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce {
    max-width: 95% !important;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    }

    Que es lo que tendria que meter con @media?

    Muchas gracias de antemano

    Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    Con @media tienes que dar propiedades distintas en función del dispositivo, es decir, en función de la anchura.

    https://lenguajecss.com/css/responsive-web-design/media-queries/

    Iniciador del debate muttmotorcyclesspain

    (@muttmotorcyclesspain)

    hace 1 año, 7 meses

    Buenas!

    He intentado distintas combinaciones pero con el móvil sigue saliendo cortado, te dejo el código completo que he usado y te añado en negrita la parte de @media. aunque cambie los valores de anchura no lo adapta a la pantalla sino que lo corta

    /* Estrecha checkout y cart de woocomerce */
    .woocommerce-cart .woocommerce .woocommerce-cart-form {
    width: 100%;
    }

    body.woocommerce-cart .woocommerce, body.woocommerce-checkout .woocommerce {
    max-width: 95% !important;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    }

    @media only screen and (max-width: 640px) {
    .woocommerce-cart .woocommerce {
    width: 100%;
    }

    Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    Prueba con

    @media only screen and (max-width: 640px) {
.woocommerce-cart table.cart {
	width: 65%;
}
}

    Sigo creyendo que el problema viene de usar una tabla. Si fueran «DIV», podrías ajustarlos más fácilmente.

    Iniciador del debate muttmotorcyclesspain

    (@muttmotorcyclesspain)

    hace 1 año, 7 meses

    Con esto se me arregla la parte de arriba, pero no el bloque de PASAR POR CAJA (el de los totales). Acerca de los DIV, es posible, pero esta apariencia la he sacado de un plugin y viene así por defecto y como no se mucho de código no se como meterme a alterar esa parte

    Sabrías como hacer lo mismo en la tabla de los totales/Pasar por caja?

    View post on imgur.com
    Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    Prueba con 

    @media only screen and (max-width: 640px) {
.cart_totals {
	width: 45%;
}
}
    Iniciador del debate muttmotorcyclesspain

    (@muttmotorcyclesspain)

    hace 1 año, 7 meses

    Buenas

    Muchísimas gracias, ahora si que esta trabajando mejor y se ve bien. Dejo el tema como solucionado

    Moderador almendron

    (@almendron)

    hace 1 año, 7 meses

    De nada. Un saludo

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • El debate ‘Problemas con el ancho de página’ está cerrado a nuevas respuestas.