Impostare modulo negozio a 2 colonne su mobile

In questo post puoi trovare un codice che fa aumentare la larghezza dei contenuti del tuo sito Divi su mobile smartphone.

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!

Autore del blog

Riccardo

Riccardo

Appassionato di WordPress da oltre 20 anni, ho creato centinaia di siti per diversi clienti, privati e pmi. Con il tema Divi ho imparato a sviluppare siti moderni e professionali a una velocità straordinaria e ho lanciato Divi Design Studio per condividere strumenti e risorse. La nuova collezione di layout è in continua fase di aggiornamento. Aggiungiamo più di 20 nuovi prodotti ogni mese! Se sei interessato, scopri di più.

Sito di Riccardo

Gruppo Facebook

Pagina Instagram

Gruppo Telegram

Mostra/Nascondi Commenti (0 commenti)
L

0 commenti

Invia un commento

Il tuo indirizzo email non sarà pubblicato.

Ti potrebbe anche interessare…

Cyber Week e Black Friday: acquista l'accesso esclusivo all'area VIP in promo fino al 50% 🔝