BlogTema DiviImpostare modulo negozio a 2 colonne su mobile

Impostare modulo negozio a 2 colonne su mobile

Immagine con titolo di un articolo su come impostare modulo negozio a 2 colonne su mobile
Indice dei contenuti

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;
    }
}
Uno screenshot di come dovrebbe essere il risultato:
Modulo negozio a due colonne Divi

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Divi Design Studio rende semplice l’evoluzione digitale di aziende ambiziose.

Mi occupo di Realizzazione, Restyling e Gestione Siti WordPress.

Menu

2024 © Divi Design Studio | P.IVA 04891580237 | Privacy Policy

Promozione esclusiva!

Risparmia sulla realizzazione o il restyling di un sito WordPress con l’esclusiva promozione di fine anno! Per tutto il mese di novembre e fino al 16 dicembre, Divi Design Studio ti offre uno sconto del 10% su tutti i servizi.