Soporte » Guías – Resolución de problemas » MARGEN BLANCO DERECHA FORMATO MOVIL

  • Resuelto papaiashop

    (@papaiashop)


    BUENOS DÍAS, AL ABRIR UN PRODUCTO PARA VERLO DETALLADAMENTO, ES DECIR, EN LA PÁGINA QUE APARECEN TODAS LAS FOTOS, PRECIOS ETC DEL PRODUCTO EN CUESTIÓN, ME ENCUENTRO CON QUE EL ÍNDICE DE PÁGINA CORTA LA INFORMACIÓN DEL PRODUCTO, NO HAY UN MÁRGEN ENTRE ESTE Y EL PRODUCTO. ¿PODRÍAN DECIRME COMO SOLUCIONARLO PASO POR PASO?
    MUCHAS GRACIAS DE NUEVO

    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)
  • Buenas!

    Para solucionar este problema, hay que añadir un par de propiedades a los estilos del encabezado. Veo que hay unos estilos embebidos que modifican el tema Astra, estos son los que necesitan un par de retoques:

    Donde pone:

    @media (min-width: 922px) {
      .ast-theme-transparent-header #masthead {
        position: absolute;
        left: 0;
        right: 0;
      }
    }

    Hay que modificarlo para que sea:

    @media (min-width: 922px) {
      .ast-theme-transparent-header #masthead {
        position: relative;
        left: 0;
        display: flex;
        right: 0;
      }
      .main-header-bar-wrap {
        position: relative;
        width: 100%;
      }
    }

    Y se verá tal que así 🙂

    Un saludo.

    Iniciador del debate papaiashop

    (@papaiashop)

    Hola buenas noches, mil gracias por tu restuesta.
    El hecho es que no se muy bien como he hacer las modificaciones que me dices. Se bastante poco de wordpress y menos aún de informática.
    ¿Sería mucho pedir que me indiques como hacerlo?
    Muchas gracias nuevamente.

    Moderador Jose Luis

    (@jose64)

    Hola.

    Los códigos personalizados puedes añadirlos en la ruta:

    Apariencia > Personalizar > CSS adicional

    Recuerda cerrar el debate marcándolo como resuelto, así nos ayudas a mantener el foro al día.

    Iniciador del debate papaiashop

    (@papaiashop)

    Mil gracias, ha sido super útil.

    Iniciador del debate papaiashop

    (@papaiashop)

    Hola buenos días, os comunique este problema hará unas semanas y lo resolví con vuestras indicaciones. El hecho es que pensaba que estaba solucionado porque al abrir la página de productos desde el ordenador ya no me aparecían cortadas las fotos e información, sin embargo, al visualizar los productos en el móvil, las imágenes están totalmente cortadas, se ve solo el filo inferior de la imagen. ¿Creéis que podríais ayudarme a solucionarlo? Muchas gracias de nuevo, no sabéis como me ayudáis.

    Moderador Jose Luis

    (@jose64)

    Hola.

    El formato de imagen que estás usando seguramente no se corresponde con el usado por el tema, tienes que revisar los ajustes de imagen de WooCommerce en la ruta Apariencia > Personalizar WooCommerce

    Iniciador del debate papaiashop

    (@papaiashop)

    Estoy intentando cambiar el tamaño de las imágenes, probando los distintos tamaños que te ofrece la web y cambiando el formato de mis fotos, pero aún así se me recortan. Mi tema es Astral, ¿Te importaría indicarme que seleccionar, si 1:1, 4:3 o personalizado y a qué tamaño podría cambiar mis fotos para que estas no aparezcan después recortadas?
    Muchas gracias.

    Moderador Jose Luis

    (@jose64)

    Hola.

    El problema es que las imágenes tienen distintos formatos, para que todo te funcione correctamente las imágenes deben ser todas en el mismo formato, yo recomiendo que sean siempre cuadradas, el formato de imagen por defecto de WooCommerce, así no hay que hacer recortes.

    Para que se vean completas en Apariencia > Personalizar > WooCommerce tienes que seleccionar Sin recortar, como te indica el apartado las imágenes se mostrarán usando la relación de aspecto en la que se subieron.

    Los tamaños de las imágenes de WordPress se definen en Ajustes > Medios, yo para las imágenes de producto siempre recomiendo como norma general subirlas de 600×600 y si necesitan ampliarse en tamaños mayores pero proporcionales, siempre relación 1:1

    • Esta respuesta fue modificada hace 11 meses, 4 semanas por Jose Luis.
    Iniciador del debate papaiashop

    (@papaiashop)

    Buenos días, y perdón por escribirte de nuevo.

    Ayer estuve intentando solucionar mi problema como me explicaste. Cambié el formato de ciertas imágenes, las correspondientes a unos productos concretos para que las imágenes de esos productos fueran todas del mismo tamaño. El problema es que les puse formato 600×600, seleccionando la opción de sin recortar en apariencia y poniendo en Ajustes>Medios un tamaño máximo de 1024×1024, sin embargo, las fotos de producto me siguen apareciendo cortadas. No sé si esto es porque sólo he cambiado las fotos de esos productos (para evitar tomarme el trabajo de cambiar el tamaño de todas las fotos a 600×600 y que luego no funcione, o es que está pasando otra cosa).

    Los productos a los que les puse todas las imágenes en 600×600 son los siguientes:

    https://www.papaiashop.com/producto/asai-cola-less-regulable-bikini/
    https://www.papaiashop.com/producto/koa-cola-less-regulable-bikini/

    Cuando tenía fotos de diferentes tamaños algunas se veían a medias, estas se ve sólo 1/4 de la imagen.
    Pd: En formato ordenador y tablet se ven bien, donde se cortan es en formato móvil.

    Siento mucho marearos tanto, de verdad que si supiera resolverlo por mi misma lo haría. Mil gracias de nuevo.

    Moderador Jose Luis

    (@jose64)

    Hola.

    Ahora el problema no es el tamaño de las fotos, el encabezado está superpuesto a la imagen, en algún sitio modificaste el CSS y lo posicionaste mal, puedes verlo añadiendo este código al CSS personalizado:

    @media (max-width: 921px)
    #primary, #secondary {
        margin-top: 250px;
    }

    Lo ideal sería que buscaras dónde lo modificaste y lo anulases, si no con ese código lo solucionas

    Iniciador del debate papaiashop

    (@papaiashop)

    No se como hacerlo :((((
    En Apariencia>Personalizar>CCS Adicionales tenía puesto lo siguiente:

    @media (min-width: 922px) {
    .ast-theme-transparent-header #masthead {
    position: relative;
    left: 0;
    display: flex;
    right: 0;
    }
    .main-header-bar-wrap {
    position: relative;
    width: 100%;
    }

    y le he añadido lo que me acabas de indiv+car, quedando así:

    @media (min-width: 922px) {
    .ast-theme-transparent-header #masthead {
    position: relative;
    left: 0;
    display: flex;
    right: 0;
    }
    .main-header-bar-wrap {
    position: relative;
    width: 100%;
    }
    @media (max-width: 921px)
    #primary, #secondary {
    margin-top: 250px;
    }

    Sin embargo, las fotos siguen apareciéndome cortadas. ¿Sábrías decirme donde puedo encontrar el apartado donde tengo que cambiar la CCS o decirme como hacerlo? No soy una gran entendida.

    Muchas gracia, un saludo Jose Luis

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • El debate ‘MARGEN BLANCO DERECHA FORMATO MOVIL’ está cerrado a nuevas respuestas.