prodotto correlato non visualizzato correttamente in tema mobile.

[amedeoi]

Buonasera.
Ho un problema con la visualizzazione, nella pagina del prodotto, dei prodotti correlati.
I prodotti aggiunti nella descrizione base di un prodotto in prestashop 1.7.6.1 vengono visualizzati in colonna e non in griglia di 4 .
Il problema si verifica visualizzando da tema mobile, e la colonna è allineata a sinistra.
Ho fatto vari tentativi per modificare il blocco relativo a questa funzione in product tlp ma senza nessun risultato.
Allego la porzione di codice , che secondo me, è relativa al blocco in questione.

{block name='product_accessories'}
      {if $accessories}
        <section class="product-accessories clearfix">
          <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p>
          <div class="products">
            {foreach from=$accessories item="product_accessory"}
              {block name='product_miniature'}
                {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
              {/block}
            {/foreach}
          </div>
        </section>
      {/if}
    {/block}

Qualcuno sa come risolvere?
Grazie in anticipo.

[ziobudda]

Ciao, quasi sicuramente è un problema di CSS visto che ti capita solo nel mobile. Controlla le regole di CSS. 

[amedeoi]

Grazie per la risposta.
Si avevo intuito che si trattasse di CSS, ma in prestashop 1.7.6.1 il css è compilato in un unico rigo. 
Non sono molto pratico e non riesco a trovare quello che interessa...
Non è  possibile aggiungere in custom css una regola che adatti il tutto?

 

[ziobudda]

Ciao, puoi inserire la riga del CSS all'interno di style.css senza problemi. Non è importante che sia su una riga sola insieme alle altre regole. L'unica è che se aggiorni il tema perdi la modifica.

Altrimenti, ed è la soluzione migliore, crei un tema figlio ed inserisci la modifica al css. Così anche se aggiorni il tema padre, la modifica non la perdi. 

M.

 

[amedeoi]

Buongiorno,

Ho risolto (temporaneamente) inserendo una riga nel css personalizzato.
Ho inserito: .product-accessories .product-miniature{margin:0 auto}

Adesso si adatta benissimo sugli schermi piccoli, come tablet e smartphon.

Sul Pc invece, se nel modulo ci sono 5 prodotti da mostrare, il quinto lo allinea al centro dello schermo, mentre negli altri moduli lo sposta a sinistra.

Da quello che ho visto manca una regola che adatti il modulo nel cambio della risoluzione dello schermo che per pc dovrebbe essere Margin:0 .8125 e per schermi con risoluzione più piccola margin:0 auto

Nessuno ha avuto il mio stesso problema?

Come posso fare per sistemare?

Grazie in anticipo.

[ziobudda]

Devi usare le media query così che la modifica al CSS si attivi solo per i dispositivi di una certa larghezza

 

[amedeoi]

Potresti farmi un esempio?
Non sono molto pratico di css e per  verità ci ho provato ma senza risultato.
Grazie in anticipo.

 

[amedeoi]

Risolto!
in questo modo.
@media screen and (max-width: 767px) {
  .product-accessories .product-miniature {
    margin:0 auto;
  }
}

Grazie.