eu tenho umviolino que eu repliquei vendo a captura de tela abaixo:

oCódigo CSS que usei para o item de caixa quadrada individual é:

.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
}

Declaração do problema:

Agora, na visualização móvel, quero os itens na captura de telarolar horizontalmente na visualização para celular / tablet sem qualquer alteração no tamanho de um item. Para fazer isso, usei o seguinte código CSS, mas ele não parece funcionar.

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

Estou imaginando que alterações devo fazer no violino para que a captura de tela inteira role na exibição para celular / tablet.