Soporte » Guías – Resolución de problemas » Error diseño responsive

  • Resuelto carlosoo

    (@carlosoo)


    Buenas tardes,

    He estado modificando el CSS sobre el plugin de Woocommerce en el tema de la página de un cliente y tengo problema con el diseño responsive. Utilizo siempre el inspector de elementos para hacer pruebas y luego traslado los cambios a un notepad y, por último, al tema mismo.

    El problema reside en cuanto reviso el diseño aplicado a dispositivos móviles. En unos dispositivos todo se genera correctamente (Moto G4, Galasy S4), mientras que en otros aparecen elementos desbordados (Pixel y versiones muy concretas de Iphone). Me gustaría saber por qué ocurre esto.

    Actualmente, tengo definido las media qerys de la siguiente manera.

    @media only screen and (max-device-width: 450px) and (min-device-width: 300px) and (min-device-height: 500px) { 
    	
    	.woocommerce {
        display: block;
        position: relative;
    }
    
    	p.woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
        padding-bottom: 1.2em;
        font-size: 16.5px;
    }
    
    ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details {
        display: block;
        border: 1px solid rgba(0,0,0,0.4);
        box-shadow: 1px 0.5px 4px 0.5px;
        border-radius: 5px;
        border-collapse: collapse;
        width: 100%;
        height: 350px;
        position: relative;
        text-align: left;
    	left: 2%;
     }
    }

    Gracias por su respuesta.

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

Viendo 1 respuesta (de un total de 1)
  • Moderador Jose Luis

    (@jose64)

    Hola.

    Eso se debe a los problemas de compatibilidad que tienen los navegadores, principalmente Safari, con los estándares CSS. Tienes que crear reglas específicas para esos navegadores (o pasar de ellos por no respetar los estándares que son la base de Internet) usando media queries (consultas de medios) específicas para ellos, revisa esta documentación:

    WebKit CSS extensions

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

Viendo 1 respuesta (de un total de 1)
  • El debate ‘Error diseño responsive’ está cerrado a nuevas respuestas.