/* ============================================================================= * PAGINA ELENCO PRODOTTI - FOGLIO 4 di 5: VISTA A RIQUADRI * ----------------------------------------------------------------------------- * Solo la griglia della vista a RIQUADRI e il suo responsive. Template serviti: * view_from_category_boxes.php e products_list_boxes.php. * * ORDINE DI CARICAMENTO (i cinque fogli vanno inclusi in questa sequenza) * 1. paginaelencoprodotti-1-base.css ..... comune alle tre viste * 2. paginaelencoprodotti-2-table.css .... solo vista TABELLA * 3. paginaelencoprodotti-3-list.css ..... solo vista LISTATO * 4. paginaelencoprodotti-4-boxes.css .... solo vista RIQUADRI * 5. paginaelencoprodotti-5-contorno.css . resto della pagina, e altre pagine * * I fogli 2, 3 e 4 si escludono a vicenda: ogni pagina ne carica uno solo, * quello della modalita' di visualizzazione scelta. I fogli 1 e 5 servono * sempre. * * COSA CAMBIA RISPETTO ALLE REGOLE PRECEDENTI * I quattro riquadri per riga erano ottenuti nel template con un contatore PHP * che apriva un
ogni quattro prodotti: con un numero di * prodotti non multiplo di quattro l'ultimo
restava aperto. Ora la riga * e' una griglia CSS e il template non conta piu' niente. Le tre altezze fisse * di .container-elenco-products-box (21em, 29.5em, 39em) sono state tolte: i * riquadri di una stessa riga si allineano da soli, e prezzo e pulsanti restano * appoggiati al fondo anche quando i titoli hanno lunghezze diverse. * L'aspetto (angoli, ombra, filetto colorato a sinistra, fondo che schiarisce * al passaggio del mouse) e' rimasto quello di prima. * * INDICE * B1. Token della vista * B2. Griglia dei riquadri * B3. Riquadro - impianto interno * B4. Aree del riquadro * B5. Responsive * ========================================================================== */ /* ============================================================================= * B1. TOKEN DELLA VISTA * ========================================================================== */ .box-container-products-boxes, .container-elenco-products-box { --bx-columns: 4; /* riquadri per riga */ --bx-gap: 14px; /* distanza fra un riquadro e l'altro */ --bx-thumb-size: 8.75rem; /* 140px - miniatura, come nella vista tabella */ --bx-tools-size: 32px; /* colonna delle icone a destra della miniatura */ /* ALTEZZA DELLA COLONNA DELLE ICONE: tre pulsanti da 30px con due corridoi da 6px. I due valori non sono inventati qui, stanno nel foglio 1 (.tp-icon-action -> width/height: 30px) e poco piu' sotto in questo foglio (.bx-tools -> gap: 6px): se un giorno cambiano la', va cambiato anche questo calcolo, ed e' il solo punto da toccare. Serve a far finire la cornice della foto esattamente dove finisce il terzo pulsante, quello dei PREFERITI. */ --bx-tools-h: calc(3 * 30px + 2 * 6px); /* 102px */ /* Altezza fissa del riquadro azzurro del prezzo: e' quella che assume quando c'e' anche la riga "Promo fino al ..." (43px senza, 58 con). Fissarla vuol dire che i riquadri azzurri di una riga sono alti uguali, con o senza promozione. E' una riga sola da cambiare. */ --bx-price-h: 58px; } /* ============================================================================= * B2. GRIGLIA DEI RIQUADRI * ----------------------------------------------------------------------------- * minmax(0, 1fr) e non 1fr: senza il minimo a zero un titolo lungo allargherebbe * la colonna e la riga uscirebbe dal contenitore. * ========================================================================== */ .box-container-products-boxes { display: grid; grid-template-columns: repeat(var(--bx-columns), minmax(0, 1fr)); gap: var(--bx-gap); align-items: stretch; } /* ============================================================================= * B3. RIQUADRO - IMPIANTO INTERNO * ----------------------------------------------------------------------------- * Sei fasce impilate: * miniatura | icone * titolo e sottotitolo * specifiche * disponibilita' * prezzo e promozione * quantita' e pulsante carrello * Le ultime due fasce sono spinte in fondo (margin-top: auto sull'area prezzo), * cosi' i pulsanti di riquadri affiancati restano allineati fra loro. * ========================================================================== */ .container-elenco-products-box { display: grid; grid-template-columns: minmax(0, 1fr) var(--bx-tools-size); grid-template-areas: "media specs-tools" "title title" "specs specs" "stock stock" "price price" "buy buy"; /* LE SEI FASCE, CON LA QUARTA CHE ASSORBE LO SPAZIO CHE AVANZA. Serve a tenere PREZZO, QUANTITA' e CARRELLO appoggiati in fondo, cosi' che i quattro riquadri di una riga li abbiano tutti alla stessa quota. Prima non succedeva, e non bastava il margin-top: auto sull'area del prezzo piu' sotto: in una griglia quel margine sposta l'elemento DENTRO la propria fascia, e la fascia del prezzo e' alta quanto il suo contenuto (auto), quindi di spazio libero da mangiare non ne aveva. Con align-content: start le sei fasce restavano impacchettate in alto e tutto l'avanzo finiva sotto l'ultima. Misurato: quattro riquadri alti 535px con i pulsanti a quota 383, 460, 406 e 461, cioe' 78px di scarto fra il primo e l'ultimo. Dando 1fr alla fascia della DISPONIBILITA' - che e' quella subito sopra al prezzo - l'avanzo si raccoglie li' e le due fasce sotto scendono in fondo da sole. align-content non serve piu': con una fascia elastica le sei fasce riempiono sempre tutta l'altezza. */ grid-template-rows: auto auto auto 1fr auto auto; column-gap: 10px; row-gap: 8px; position: relative; /* Sostituisce min-height: 12em !important e le tre altezze fisse. */ min-height: 0; height: 100%; margin: 0; padding: 12px; /* Il riquadro NON ritaglia il proprio contenuto. Prima era overflow: hidden e tagliava il tooltip della disponibilita': il tooltip e' centrato sulla pillola, la pillola "Ordinabile" e' corta e sta a filo del bordo sinistro, quindi il tooltip usciva a sinistra e spariva. Popper, la libreria che posiziona i tooltip di Bootstrap, riconosce come confine solo i contenitori con overflow auto/scroll/overlay: hidden non lo vedeva, quindi non spostava il tooltip - lo lasciava dov'era e il riquadro se lo mangiava. Senza hidden il confine diventa .box-container-products, che ha overflow-y: auto ed e' largo quanto tutta l'area dei prodotti: Popper riesce a tenerci dentro il tooltip, e il riquadro non taglia piu' niente. Il filetto d'accento qui sotto ha un raggio suo perche' senza il ritaglio i suoi angoli sporgerebbero da quelli arrotondati della scheda. */ overflow: visible; background-color: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: var(--tp-card-radius); box-shadow: var(--tp-shadow-card); transition: background-color 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .container-elenco-products-box:hover { background-color: #fbfbfb; border-color: #cddae4; box-shadow: var(--tp-shadow-hover); transform: translateY(-1px); } /* Filetto d'accento sul bordo sinistro, identico a quello della vista TABELLA: invisibile a riposo, compare al passaggio del mouse. Prima il riquadro aveva ANCHE un border-left azzurro di 4px sempre acceso: da rivenditore si vedevano percio' due filetti, l'oro e l'azzurro, e da utente normale l'azzurro si vedeva sempre invece che solo in hover. Il filetto dorato del rivenditore arriva dal foglio 1 e si appoggia a questo stesso ::before: ha due classi di specificita' contro una, quindi vince sul colore e resta acceso, in hover e fuori. */ .container-elenco-products-box::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background-color: var(--tp-accent); border-radius: var(--tp-card-radius) 0 0 var(--tp-card-radius); opacity: 0; transition: opacity 0.18s ease; } .container-elenco-products-box:hover::before { opacity: 1; } /* ============================================================================= * B4. AREE DEL RIQUADRO * ========================================================================== */ .container-elenco-products-box > .bx-media { grid-area: media; min-width: 0; } .container-elenco-products-box > .bx-tools { grid-area: specs-tools; } .container-elenco-products-box > .title-subtitle-container { grid-area: title; min-height: 0; overflow: hidden; } .container-elenco-products-box > .container-sku-minord-packaging { grid-area: specs; min-height: 0; } /* La fascia adesso e' elastica: senza align-self la pillola verrebbe stirata su tutta l'altezza e l'etichetta verde finirebbe a mezz'aria. Cosi' resta appoggiata in alto, subito sotto le specifiche, come prima. */ .container-elenco-products-box > .container-available-quantity-bulky { grid-area: stock; min-height: 0; align-self: start; } .container-elenco-products-box > .container-product-price { grid-area: price; margin-top: auto; } .container-elenco-products-box > .container-cart-favorite-quotation-button { grid-area: buy; } .container-elenco-products-box > .tp-row-alert { grid-area: alert; align-self: end; } /* Riquadro in cui un avviso sostituisce prezzo e pulsanti. L'ultima fascia prende tutto lo spazio che avanza (1fr) e l'avviso ci si appoggia in fondo: cosi' finisce alla stessa quota del pulsante "aggiungi al carrello" dei riquadri accanto, invece di lasciare un vuoto in coda. Serve perche' i riquadri di una riga sono alti uguali e questo, avendo meno contenuto degli altri, avanzava spazio. */ .container-elenco-products-box:has(> .tp-row-alert) { grid-template-areas: "media specs-tools" "title title" "specs specs" "stock stock" "alert alert"; /* Qui le fasce sono cinque e l'avviso prende il posto di prezzo e pulsanti: l'elastica resta la quarta, quella della disponibilita', e l'avviso scende in fondo come ci scendono gli altri due. */ grid-template-rows: auto auto auto 1fr auto; } /* --- Miniatura e targhetta del catalogo ----------------------------------- */ /* La targhetta del catalogo sta SOTTO l'immagine (nel template viene dopo di essa), allineata a sinistra come tutto il resto del riquadro, e a 7px dal bordo basso dell'immagine: e' il gap della colonna. Il margine inferiore che la targhetta ha di suo nel foglio 1 qui va tolto, altrimenti aggiungerebbe 3px al fondo del blocco. */ .bx-media { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .container-elenco-products-box .tp-catalogue-chip { margin: 0; } /* Come nelle altre viste si legge il solo nome del catalogo: la parola "Catalogo" resta nel markup - quindi nel testo della pagina e per chi legge con la sintesi vocale - ma non a schermo. L'icona invece qui RESTA a tutte le larghezze: nel riquadro lo spazio c'e', ed e' l'unico segno che dice a colpo d'occhio che cos'e' quella targhetta. Per toglierla basta aggiungere .container-elenco-products-box .tp-catalogue-chip > i { display: none; } */ .container-elenco-products-box .tp-catalogue-chip-word { display: none; } /* --- Tooltip della disponibilita' ------------------------------------------ * Il messaggio della pillola verde/arancione (disponibilita' immediata, * magazzino esterno, ordinabile) e' lungo una sessantina di caratteri e sul * sito arriva su una riga sola: nella vista tabella e nel listato la scheda e' * larga e ci sta, nel riquadro no. Il riquadro e' largo ~230px quando le * colonne sono quattro, ha overflow: hidden, ed e' anche il riquadro entro cui * Bootstrap cerca di tenere il tooltip: piu' largo di cosi', il tooltip non ha * dove stare e viene tagliato da tutte e due le parti. * * Qui il tooltip viene stretto a 180px e va a capo. 180px stanno dentro il * riquadro piu' stretto (230px meno i 24px di padding fanno 206px di spazio * utile), quindi Bootstrap riesce sempre a posizionarlo per intero. * * La regola vale SOLO per i riquadri: e' ancorata a * .container-elenco-products-box, che e' la classe della sola vista RIQUADRI - * tabella e listato usano classi diverse e restano come sono, anche quando i * cinque fogli vengono caricati tutti insieme. * * !important perche' la larghezza del tooltip e' decisa da un foglio esterno a * questi cinque (Bootstrap o il CSS del portale) che qui non si puo' vedere: * senza, non e' detto che questa regola vinca. Per allargarlo o stringerlo * basta cambiare i 180px. * -------------------------------------------------------------------------- */ .container-elenco-products-box .tooltip-inner { max-width: 180px !important; white-space: normal !important; } /* Anche TUTTO quello che sta dentro il tooltip, non solo il tooltip. * Serve per il messaggio di ORDINABILE, l'unico dei tre che arriva come HTML e * non come testo semplice: il suo contenuto e' dentro un elemento, e quella * regola del foglio 1 * * .text-availability-tableproducts, * .text-availability-tableproducts * { white-space: nowrap !important; } * * - che serve a tenere l'etichetta della pillola su una riga sola - raggiunge * anche lui, perche' Bootstrap inserisce il tooltip DENTRO la pillola. Il * risultato era che il riquadro del tooltip veniva stretto a 180px ma il testo * dentro restava su una riga sola e usciva lo stesso: misurato, 501px di * contenuto e 193px fuori dalla scheda. Con gli altri due messaggi non * succedeva perche' sono testo semplice e prendono il white-space dal * tooltip stesso. * * Due classi di specificita' contro una: questa regola vince su quella del * foglio 1 senza doverla toccare - e il foglio 1 serve a tutte e tre le viste, * quindi e' giusto non toccarlo. * -------------------------------------------------------------------------- */ .container-elenco-products-box .tooltip-inner * { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere; } .container-elenco-products-box .container-img-tableproducts { width: 100%; height: var(--bx-thumb-size); align-self: stretch; } /* --- La cornice della foto finisce dove finisce il pulsante PREFERITI ------ * La cornice e la colonna delle icone stanno nella stessa fascia della griglia * ("media specs-tools"), ma sono misurate in due unita' diverse: la cornice in * rem (--bx-thumb-size), le icone in px. Se il corpo base del sito non e' 16px * - sul portale e' circa 10px, cioe' il classico font-size: 62.5% - la cornice * si rimpicciolisce e le icone no: la colonna delle icone diventa piu' alta * della cornice, e sotto la foto resta la striscia bianca che hai cerchiato. * * max() prende il piu' alto dei due: dove la cornice e' gia' piu' alta (corpo * base 16px) non cambia niente, dove e' piu' bassa la porta a filo con il fondo * del terzo pulsante. Non e' una misura fissa buttata li': si aggiusta da sola * qualunque sia il corpo base, e resta uguale in tutti i riquadri di una riga * anche quando un prodotto ha due icone invece di tre. * * Vale da 900px in su, cioe' finche' le icone sono una colonna a fianco della * foto. Sotto stanno altrove e questa regola non deve entrarci. * -------------------------------------------------------------------------- */ @media screen and (min-width: 900px) { .container-elenco-products-box .container-img-tableproducts { height: max(var(--bx-thumb-size), var(--bx-tools-h)); } } /* --- Colonna delle icone -------------------------------------------------- */ .bx-tools { display: flex; flex-direction: column; align-items: center; gap: 6px; } /* --- Specifiche: una voce per riga, come nell'originale -------------------- */ .container-elenco-products-box > .container-sku-minord-packaging { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px solid var(--tp-border); } /* La targhetta COLLO VOLUMINOSO non deve allungarsi a tutta colonna. */ .container-elenco-products-box .info-bulky-product { align-self: flex-start; } /* --- Prezzo, promozione e acquisto ---------------------------------------- */ .container-elenco-products-box > .container-product-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; max-width: none; } /* Da 900px in su i riquadri stanno affiancati: il riquadro del prezzo prende un'altezza fissa, cosi' e' uguale in tutti e non solo appoggiato in fondo. Senza, quello con la riga della promozione e' 15px piu' alto degli altri e il suo bordo superiore resta piu' su, anche se il fondo e' allineato. Il justify-content: center arriva dal foglio 1: quando la riga della promozione non c'e', il prezzo da solo si trova a meta' altezza invece che appoggiato in alto. Sotto i 900px c'e' un riquadro per riga e non c'e' niente da pareggiare: li' l'altezza fissa aggiungerebbe soltanto spazio bianco. */ @media screen and (min-width: 900px) { .container-elenco-products-box > .container-product-price { height: var(--bx-price-h); } } .container-elenco-products-box > .container-cart-favorite-quotation-button { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; padding: 8px 0 0 !important; border-left: 0; border-top: 1px solid var(--tp-border); } .container-elenco-products-box .tp-quantity-field { flex: 0 0 auto; } /* Il pulsante prende tutto lo spazio che avanza accanto alla quantita'. */ .container-elenco-products-box .btn-primary3-tableproducts-cart { flex: 1 1 8rem; } /* Nel riquadro il titolo puo' occupare tre righe. */ .container-elenco-products-box .title-product > a { -webkit-line-clamp: 3; line-clamp: 3; } /* ============================================================================= * B5. RESPONSIVE * ----------------------------------------------------------------------------- * Il numero di colonne e' l'unica cosa che cambia davvero: il riquadro resta * sempre lo stesso. * * >= 1400px 4 riquadri per riga * 1200-1399 3 * 900-1199 2 * < 900px 1, con la miniatura affiancata al testo * ========================================================================== */ /* ----------------------------------------------------------------------------- * B5.0 LA FASCIA STRETTA DEI QUATTRO RIQUADRI (1400 - 1599px) * ----------------------------------------------------------------------------- * E' la fascia in cui i riquadri diventano quattro ma la finestra e' ancora * piccola: il riquadro e' il piu' stretto che esista in tutta la vista. Li' * QUANTITA' e AGGIUNGI AL CARRELLO non ci stanno affiancati, il pulsante va a * capo sotto la casella e a destra della quantita' resta un corridoio vuoto. * * Non e' il flex-basis a mandarlo a capo: e' la larghezza MINIMA dei due * elementi. Misurata sul banco di prova, con l'unita' "Conf" (la piu' larga): * * casella quantita' 99px + corridoio 8px + pulsante 156px = 263px * * Sotto quei 263px di blocco disponibile il pulsante scende. Qui sotto quel * minimo e' portato a 207px, togliendo 56px da dove non si vedono: * * casella quantita' 70px + corridoio 5px + pulsante 132px = 207px * * I 56px vengono da: * -18 la casella del numero da 4,5em a 3em: ci stanno tre cifre, e nei * riquadri le quantita' di partenza sono il minimo d'ordine * -10 il riquadrino dell'unita' (Pz / Conf), padding da 9 a 4px e corpo da * 11,5 a 10,5px. L'unita' RESTA scritta: e' un'informazione che serve * -3 il corridoio fra casella e pulsante, da 8 a 5px * -9 la spaziatura fra le lettere del pulsante, che era 0,04em * -10 padding laterale del pulsante da 8 a 4px e spazio dopo l'icona da 7 * a 5px: si vedono solo quando il pulsante e' al minimo, perche' negli * altri casi il testo e' centrato in uno spazio piu' largo * -6 il corpo del testo del pulsante da 11,5 a 11px <-- VEDI NOTA * * NOTA: l'ultima riga e' l'unica che si nota confrontando due finestre di * larghezza diversa. Se preferisci il testo sempre identico, cancella * "font-size: 11px" qui sotto: il minimo torna a 213px e con ogni probabilita' * ci stai lo stesso: sono i 6px di margine di sicurezza. * * SE IL PULSANTE ANDASSE ANCORA A CAPO sulla tua finestra, la colonna dei * prodotti e' piu' stretta di quanto stimato: stringi la casella del numero * (width: 3em -> 2.6em) oppure alza a 1570px la soglia dei quattro riquadri * nel blocco qui sotto, che li rimette a tre come succede gia' sotto i 1400. * * Sopra i 1599px non serve niente: il riquadro e' abbastanza largo da solo. * Sotto i 1400 i riquadri sono tre e il problema non esiste, come hai visto. * -------------------------------------------------------------------------- */ @media screen and (min-width: 1400px) and (max-width: 1599px) { .container-elenco-products-box > .container-cart-favorite-quotation-button { gap: 5px; } .container-elenco-products-box .tp-quantity-field .form-control-view-product-quantity-table-mode, .container-elenco-products-box .tp-quantity-field .input-space-quantity-table-mode { width: 3em; } .container-elenco-products-box .tp-quantity-field .form-control-view-product-packaging-table-mode { padding: 0 4px; font-size: 10.5px; } .container-elenco-products-box .btn-primary3-tableproducts-cart { gap: 5px; padding: 6px 4px; font-size: 11px; letter-spacing: 0; } } @media screen and (max-width: 1399px) { .box-container-products-boxes, .container-elenco-products-box { --bx-columns: 3; } } @media screen and (max-width: 1199px) { .box-container-products-boxes, .container-elenco-products-box { --bx-columns: 2; } } @media screen and (max-width: 899px) { .box-container-products-boxes, .container-elenco-products-box { --bx-columns: 1; } /* Con una sola colonna il riquadro e' largo quanto la pagina: la miniatura torna a fianco del testo, come nella vista tabella. */ .container-elenco-products-box { grid-template-columns: var(--bx-thumb-size) minmax(0, 1fr) var(--bx-tools-size); grid-template-areas: "media title specs-tools" "media specs specs-tools" "stock stock stock" "price price price" "buy buy buy"; /* Qui c'e' UN riquadro per riga, quindi non c'e' nessun vicino con cui allinearsi: la fascia elastica non serve e anzi lascerebbe un buco bianco fra la disponibilita' e il prezzo. Le fasce tornano tutte alte quanto il loro contenuto. */ grid-template-rows: none; column-gap: 14px; } .container-elenco-products-box:has(> .tp-row-alert) { grid-template-rows: none; } .container-elenco-products-box > .container-available-quantity-bulky { align-self: auto; } .container-elenco-products-box .container-img-tableproducts { width: var(--bx-thumb-size); } .container-elenco-products-box:has(> .tp-row-alert) { grid-template-areas: "media title specs-tools" "media specs specs-tools" "stock stock stock" "alert alert alert"; } .container-elenco-products-box > .container-product-price { margin-top: 0; } .container-elenco-products-box > .tp-row-alert { margin-top: 0; } } /* ----------------------------------------------------------------------------- * SOTTO I 575px - IL RIQUADRO SU UNA COLONNA SOLA * ----------------------------------------------------------------------------- * Qui il riquadro e' largo quanto lo schermo e non c'e' piu' ragione di tenere * una colonna di 32px a destra per le tre icone: la sottraeva alla foto, che e' * l'unica cosa che a questa larghezza aiuta davvero a riconoscere il prodotto. * * Tre cambiamenti, tutti e tre solo qui sotto: * * 1. UNA COLONNA SOLA. La griglia passa da due colonne a una, e la fascia * delle icone ("specs-tools") scende SOTTO l'immagine invece di starle a * fianco. Le icone si dispongono in riga, allineate a sinistra come il * resto del riquadro. * * 2. LA FOTO A TUTTA LARGHEZZA E PIU' GRANDE. Recuperati i 32px della colonna * delle icone piu' i 10 del corridoio, il riquadro dell'immagine passa da * 479 a 525px di larghezza su uno schermo da 575. L'altezza sale da 7rem * (112px) a 11rem (176px): con tutta quella larghezza a disposizione, * 112px lasciavano la foto piccola in mezzo a una fascia vuota. * * 3. QUANTITA' E CARRELLO SULLA STESSA RIGA. Erano uno sopra l'altro, e il * pulsante a tutta larghezza sotto un campo da 4,5em lasciava un buco a * destra della quantita'. Adesso stanno affiancati, con il pulsante che si * prende lo spazio che avanza: due righe diventano una. * -------------------------------------------------------------------------- */ @media screen and (max-width: 575px) { .container-elenco-products-box { /* da 7rem: la foto ha tutta la larghezza del riquadro, e con un'altezza da 112px ci nuotava dentro. */ --bx-thumb-size: 11rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "specs-tools" "title" "specs" "stock" "price" "buy"; /* Sempre un riquadro per riga: le fasce restano alte quanto il loro contenuto, come sopra. */ grid-template-rows: none; } .container-elenco-products-box:has(> .tp-row-alert) { grid-template-areas: "media" "specs-tools" "title" "specs" "stock" "alert"; } /* La foto prende tutta la larghezza del riquadro: non c'e' piu' nessuna colonna accanto da cui tenersi distante. */ .container-elenco-products-box .container-img-tableproducts { width: 100%; } /* Le tre icone in RIGA sotto l'immagine, non piu' in colonna al suo fianco. align-items torna a center perche' adesso e' l'asse verticale. */ .container-elenco-products-box > .bx-tools { flex-direction: row; align-items: center; justify-content: flex-start; } /* Quantita' e carrello affiancati. La riga sotto i 575px prima li metteva in colonna: qui si torna a "row", che e' anche il valore che il riquadro usa a tutte le altre larghezze. */ .container-elenco-products-box > .container-cart-favorite-quotation-button { flex-direction: row; align-items: stretch; } /* Il pulsante si prende tutto lo spazio che avanza accanto alla quantita'. E' lo stesso valore che ha sopra i 575px: qui veniva azzerato perche' il pulsante stava su una riga sua. */ .container-elenco-products-box .btn-primary3-tableproducts-cart { flex: 1 1 8rem; } }