Tengo unviolí que he replicado al ver la captura de pantalla a continuación:

LosCSS code que he usado para el elemento de caja cuadrada individual es:

.product-contents .product {
  width: 10%;
  text-align: center;
  height: 150px;
  padding-top: 1%;
  padding-left: 1%;
  padding-right: 1%;
  border-style: solid;
  border-width: 3px;
  border-color: rgb(145, 147, 150);
  background-color: white;
  border-radius: 10px
}

Planteamiento del problema

Ahora en la vista móvil, quiero los elementos en la captura de pantallapara desplazarse horizontalmente en la vista móvil / tableta sin ningún cambio en el tamaño de un artículo. Para hacerlo, he usado el siguiente código CSS pero parece que no funciona.

@media only screen and (max-width: 767px)
.product-all-contents {
    overflow-x: auto;
    white-space: nowrap;
}

e pregunto qué cambios debería hacer en el violín para que toda la captura de pantalla se desplace en la vista móvil / tableta.