Imagen tamaño completo en la pagina de inicio woocommerce

  • gerardogd

    (@gerardogd)


    hace 1 año, 4 meses

    Hola estoy usando la plantilla del tema Astra la mas básica con el editor de Gutenberg. Creé un bloque de imagen y le doy ancho completo reviso y todo bien se ve ancho completo, pero agrego el plugin de woocommerce y la imagen que esta en la pagina de inicio y solo en la pagina de inicio y no en las otras paginas, pierde el ancho completo, no se si es un estilo pero algo esta interfiriendo, la verdad no se como buscar el problema o donde buscarlo en mis carpetas porque entiendo que el tema Astra y Gutenberg no tiene un conflicto, quizás pueda desactivar algo estilo o algo del código HTML del tema ? .

    /*modifica el ancho de la imagenes*/

    .insta360x3si.alignfull {

              width:  100vw;

              max-width:  100vw;

              margin-left:  calc(50% – 50vw);

         }

    el problema con los estilo css que busque en internet es que me da un ancho completo, pero también genera un margen superior que no me gusta. Por otro lado, cuando lo configuro para que no tenga ese margen, la imagen se mete debajo de la cabecera en dispositivos móviles, lo cual es un problema. Me gustaría encontrar una solución para que el plugin de WooCommerce no entre en conflicto con el bloque de imagen de Gutenberg. Estoy dispuesto a revisar mi código y mi estilo CSS, pero no sé dónde buscar o qué hacer para solucionarlo. Si alguien tiene un estilo que no me genere estos problemas, quizás sea mas rápido así, cualquier ayuda se agradece.

    • Este debate fue modificado hace 1 año, 4 meses por gerardogd.
    • Este debate fue modificado hace 1 año, 4 meses por gerardogd.

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

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Alvaro Torres

    (@algato333)

    hace 1 año, 4 meses

    Hola @gerardogd,

    Si te he entendido bien quieres que los estilos de ancho completo de WooCommerce no afecten al body de la página de inicio. Para hacer esto puedes usar código CSS:

    .home.ast-woo-shop-archive .site-content > .ast-container {
    max-width: unset !important;
}

    Para añadir ese código podrás hacerlo desde Apariencia/Personalizar/CSS adicional. Hay veces en las que debes limpiar caché para que estos cambios se reflejen.

    Con respecto al margen superior, si no quieres que aparezca en la versión móvil puedes usar mediaqueries CSS para que los estilos solo afecten al tamaño que consideres más oportuno. Aquí puedes leer la documentación.

    Espero haberte ayudado, Saludos

    Iniciador del debate gerardogd

    (@gerardogd)

    hace 1 año, 4 meses

    hola agradezco tu respuesta, con tu código no logre lo esperado pero me acerco a una respuesta, si bien aun no comprendo que es lo que esta bloqueando el estilo de Gutenberg en la pagina principal shop y solo en esta pagina principal que esta relacionada con woocommerce porque en las otras pagina funciona normal me gastaría entender mi problema para desactivar lo que me esta afectando y así no tener que utilizar un estilo css con query para lograr lo que debería funcionar bien, bien estuve varias horas conversando con chatgpt y me dio un query que lo junte con otro complemento que tenia y me dio un resultado que esta bien aun que al intentar optimizar el código para que sea igual en todas las pantallas no lo logre al 100% pero en pantallas de notebook de 15 y celulares de 6 pulgadas no veo problemas, en algunas pantallas puede genera un leve margen superior muy pequeño. esta es la pagina que estoy recién construyendo: https://xn--cmaras360-01a.com/

    .clasedelaimagen.alignfull {
    width: 800%;
    max-width: 100vw;
    margin-left: calc(50% – 50vw);

    z-index: 100;
    margin-top: -4rem;

    }

    @media screen and (max-width: 768px) {
    .clasedelaimagen.alignfull {
    margin-top: calc(-4rem + 10%);
    /* relación de aspecto 4:3 */
    }
    }

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • El debate ‘Imagen tamaño completo en la pagina de inicio woocommerce’ está cerrado a nuevas respuestas.

Etiquetas