Jump to content
amedeoi

prodotto correlato non visualizzato correttamente in tema mobile.

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

Grazie.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More