Error diseño responsive

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]