Problema con pagina check out da mobile .

[Saverio Galax]

Uso prestashop 8.1.7, quando faccio l'ordine si vede in questo modo. Dal pc è tutto corretto ma da mobile non va...

Prima funzionava , ho sistemato il file css per renderlo personalizzato.

Ma mi sono accorto adesso come risolvo?

 

Ecco il file custom.css : 

/* ================================
   FONT
   ================================ */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&display=swap');

body,
h1, h2, h3, h4, h5, h6,
p, a, li, span {
    font-family: 'Quicksand', sans-serif;
}

/* ================================
   LAYOUT GENERALE
   ================================ */
body {
    padding-top: 50px;
    background: #ffffff;
}

#wrapper {
    padding-top: 1.563rem;
    background: #F4EADB !important;
}

/* ================================
   BANNER ROSSO FISSO IN ALTO
   ================================ */
@keyframes changeText {
    0%, 19% { content: "Le spedizioni partono il giorno successivo all’ordine."; }
    20%, 39% { content: "Spedizioni entro 48/72 ore."; }
    40%, 59% { content: "Supporta le piccole imprese del Sud."; }
    60%, 79% { content: "Primi 100 ordini: -10% di sconto!"; }
    80%, 100% { content: "Solo prodotti artigianali Calabresi."; }
}

body::before {
    content: "Supporta le piccole imprese del Sud.";
    display: block;
    width: 100%;
    background-color: #ff3b2d;
    padding: 10px;
    text-align: center;
    border-bottom: 2px solid #C2B280;
    font-size: 16px;
    color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    animation: changeText 20s infinite linear;
}

/* ================================
   BOTTONI
   ================================ */
.btn-primary {
    color: #fff;
    background-color: #ff4c4c;
    border-color: transparent;
}

.btn-primary:hover {
    background-color: #ff7f50;
}

/* ================================
   PREZZO PRODOTTO
   ================================ */
span.current-price-value {
    font-size: 24px !important;
    font-weight: bold !important;
}

/* ================================
   HEADER / NAV
   ================================ */
.header-nav,
.header-nav .container {
    background-color: #ffffff !important;
    color: #333333 !important;
}

/* ================================
   MEGA MENU
   ================================ */
.top-menu .sub-menu {
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    border: 1px solid rgba(0,0,0,.06);
    background: #ffffff;
    padding: 15px;
}

/* ================================
   ICONE CATEGORIE
   ================================ */
.top-menu .sub-menu .category > a:first-child[href*="salumi"]::before { content: "🥩 "; }
.top-menu .sub-menu .category > a:first-child[href*="formaggi"]::before { content: "🧀 "; }
.top-menu .sub-menu .category > a:first-child[href*="pasta"]::before { content: "🍝 "; }
.top-menu .sub-menu .category > a:first-child[href*="conserve"]::before { content: "🥫 "; }
.top-menu .sub-menu .category > a:first-child[href*="vini"]::before { content: "🍷 "; }
.top-menu .sub-menu .category > a:first-child[href*="miele"]::before { content: "🍯 "; }

/* ================================
   PRODOTTO – IMMAGINI
   ================================ */

/* immagine principale:
   - NO click
   - NO zoom
*/
.product-cover,
.product-cover img,
.product-cover a {
    pointer-events: none !important;
    cursor: default !important;
}

/* rimuove lente / overlay */
.product-cover .zoom-icon,
.product-cover .layer {
    display: none !important;
}

/* miniature:
   - DEVONO funzionare
*/
.product-images img,
.product-images a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ================================
   RESPONSIVE
   ================================ */
@media (max-width: 767px) {
    .layered-slider .slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
}

[wepresta]

Hola,

Si en PC se ve bien y en móvil el checkout “se rompe” después de tocar el custom.css, lo más probable es que alguna regla esté afectando elementos del pedido en móvil.

En tu CSS hay un punto muy sospechoso:

1) body { padding-top: 50px; } + body::before { position: fixed; }

 

En móvil, ese “banner fijo” puede estar empujando/solapando partes del checkout (botones, bloques, etc.). En escritorio puede “pasar”, pero en móvil suele causar problemas.

Solución simple: aplica el padding solo en móvil (o ajusta la altura real del banner) y evita usar body::before para un elemento fijo.

Prueba así:
 

body { padding-top: 0; } /* quitarlo global */

/* Banner fijo */
body::before {
  /* deja todo igual... */
}

/* Compensación SOLO donde haga falta */
@media (max-width: 767px) {
  body { padding-top: 60px; } /* ajusta según el alto real del banner */
}

Si aun así molesta, mejor solución: mover el banner a un bloque real en el header (no pseudo-elemento), pero entiendo que quiere lo más rápido.

2) Reglas de pointer-events

Aunque están dirigidas al producto, si algún selector coincide en checkout (por ejemplo, si el tema reutiliza clases), podría bloquear clicks en móvil. Para probar rápido, comente temporalmente este bloque y pruebe el pedido en móvil:

.product-cover,
.product-cover img,
.product-cover a {
    pointer-events: none !important;
}

3) Prueba rápida para localizar el problema

 

• Renombre custom.css por 1 minuto y pruebe el checkout en móvil.
• Si vuelve a funcionar, el problema está 100% en ese CSS.
• Vuelva a activar el CSS y aplique los cambios anteriores.

Si me muestra una captura de cómo se ve “mal” en móvil (o me dice qué parte falla: botón pagar, formulario, resumen, etc.), le digo exactamente qué selector está afectando.