Soluzione
Per impostazione predefinita nei dispositivi mobile, vedremo il modulo negozio in un layout a una colonna singola. Quindi, se ti va bene vedere un prodotto, perfetto, ma con le dimensioni dello schermo dello smartphone più grandi al giorno d’oggi, possiamo aggiungere un codice che consente a due prodotti di posizionarsi uno accanto all’altro nel modulo Negozio di Divi.
Ecco il codice che va inserito in Divi > Opzioni Tema> Generali> Codice CSS Personalizzato:
/*** IMPOSTA 2 COLONNE SU MOBILE NEGOZIO ***/
@media screen and (max-width: 479px) {
.et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
width: 45.25%!important;
margin: 0 9.5% 9.5% 0!important;
}
.et_gallery_item:nth-child(2n), .et_pb_column .et_pb_grid_item:nth-child(2n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(2n), .et_pb_column .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {
margin-right: 0!important;
}
}
In questo post, ti abbiamo mostrato come modificare la visualizzazione delle colonne per dispositivo mobile come tablet e smartphone. Ora sei in grado di mostrare due prodotti uno accanto all’altro sulla maggior parte degli screen mobile accessibli al giorno d’oggi. Questo è un ottimo modo per ridurre il tempo di scorrimento e far vedere ai tuoi visitatori più prodotti contemporaneamente.
Spero che questo post sia stato utile e tu abbia trovato una soluzione. In caso contrario, lascia un commento qua sotto!
Grazie, mi sei stasto molto utile!