[Prestashop] Problema grafico su sito responsive

[carlomaria1976]

Salve,
spero di aver individuato la sezione giusta del forum.
Non riesco a risolvere un problema grafico.
Sul browser vedo correttamente l'impaginazione dei due prezzi e dei due bottoni.
Vedere immagine: https://ibb.co/fb4shc
Mentre sullo smartphone l'impaginazione appare disordinata.
Vedere immagine: https://ibb.co/kJRSFx
Qualcuno può darmi un consiglio su come intervenire?
Si tratta del sito gallica1689.it
Ho fatto una decina di tentativi ma senza fortuna.
Grazie e scusate per il disturbo.

[stoneweb]

Ciao,
posso chiederti come arrivo a quella schermata tramite il sito segnalato?
Stavo provando a navigarlo ma non l'ho trovata

[carlomaria1976]

Salve gentile sig. Stoneweb.
La problematica che segnalo è ravvisabile in home page.
La scheda riguardante il libro n° 3 in elenco a partire dall'alto.
Come noterà, il libro è in vendita sia nella versione cartacea che ebook.
Sui comuni browser i due prezzi (euro 20 ed euro 14) con i relativi bottoni sono ben allineati.
Screenshot: https://ibb.co/fb4shc
Tuttavia se si consulta il sito usando uno smartphone,
purtroppo i due prezzi (euro 20 ed euro 14) con i relativi bottoni NON sono ben allineati.
Scrrenshot: https://ibb.co/kJRSFx
Ho provato a fare delle modifiche manuali al css ma la situazione non è cambiata.
La cosa strana è che se controllo il sito sui simulatori, il problema non si verifica.
Ma se consulto il sito da smartphone, purtroppo il problema si verifica.
Potrebbe darmi un aiuto?
Grazie.

[stoneweb]

Ho visto che il template usa Bootstrap, servirebbe un "clearfix" dopo il pulsante Acquista e prima del prezzo dell'Ebook.
Il problema è che le colonne in Bootstrap hanno float:left come regola e se se ne mettono 4 da 50% di larghezza, come in questo caso, incasinano la visualizzazione a meno che non abbiano tutte la stessa altezza.
Che template sta usando?

[carlomaria1976]

Salve gentile sig. Stoneweb,
io sto usando: alysum_2.0.

#productsCarousel div.price span {  color:#c5988b;
  font-size:24px;
  line-height:29px;
  opacity:1;
  filter:alpha(opacity=100);
  margin:0px;
  overflow:auto;
  }
#productsCarousel .price .exclusive {
  /*position:absolute;
  top:0px;
  left:50%;
  opacity:0;*/
  filter:alpha(opacity=0);
  height:29px;
  width:100px;
  color:#fff;
  font-size:13px;
  line-height:29px;
  /*margin-left:-50px;*/
  padding:0px;
  font-family: "LMRomanCaps10-Regular" !important;

Questo è il codice che sono andato a modificare provando varie soluzioni.
Ma non ho sortito i risultati sperati.
Come si potrebbe risolvere?

[stoneweb]

Dunque, da qualche parte del CSS c'è questa regola

.touch #productsCarousel .price {
height: 70px;
}

Io le consiglio di sostituirla o sovrascriverla per esempio così

.touch #productsCarousel .price {
height: auto;
}

[carlomaria1976]

Salve,
la ringrazio per la sua disponibilità e pazienza.
Il file in questione è il seguente:
gallica1689.it/modules/productsCarousel/css/productsCarousel.css
La stringa da lei segnalata purtroppo non c'è.
Rilevo solamente le seguenti stringhe:

/*.touch #productsCarousel ul li {height: 390px;}*/
  #productsCarousel ul li a.slide-animate {
  display:block;
  height:268px;
  width:162px;

#productsCarousel .price {  height:29px;
  float: right;

Cosa ne pensa?
Saluti

[stoneweb]

Probabilmente si trova in un altro .css non saprei.
Comunque aggiungendo questo codice in un css qualsiasi dovrebbe funzionare:

.touch #productsCarousel .price {
	height: auto !important;
}

[carlomaria1976]

Salve,
la ringrazio per la sua consulenza.
Il problema è stato risolto.
Complimenti per la professionalità.
Saluti.