Come posso rendere tutte le schede della stessa altezza?

Link in evidenza

1. Documentazione Company XYZ sul CSS personalizzato
2. Documentazione Shopify sull’aggiunta di CSS personalizzato al tema
3. Documentazione Shopify sull’editor del tema

Rendi più uniformi le schede nella stessa riga estendendo ciascuna scheda fino all’altezza completa della riga. Fino a quando non saranno disponibili impostazioni dedicate, aggiungi un breve snippet CSS all’impostazione Custom CSS della sezione. Per i dettagli sulla configurazione, consulta la documentazione Shopify sull’aggiunta di CSS personalizzato al tema

Rendi le schede della stessa altezza

1. Nell’editor del tema, seleziona la sezione che vuoi aggiornare. Per una panoramica, consulta la documentazione Shopify sull’editor del tema

2. Scorri fino in fondo alle impostazioni della sezione e apri Custom CSS.

3. Incolla il seguente CSS:

   .card {
     height: 100%;
   }

4. Salva le modifiche.

Posiziona il testo della scheda sotto le immagini

Per impostazione predefinita, il testo della scheda potrebbe essere ancorato in fondo a una scheda della stessa altezza. Per posizionare invece il testo direttamente sotto l’immagine, aggiungi anche questo CSS:

.card__content {
  justify-content: flex-start;
}

Note sull’uso

1. Applica il CSS per ogni sezione. Aggiungi il codice a ogni sezione in cui vuoi che le schede abbiano la stessa altezza.
2. Scegli intenzionalmente l’allineamento del testo. Aggiungi il secondo snippet solo quando vuoi che il testo della scheda inizi direttamente sotto la sua immagine.
3. Salva prima di visualizzare l’anteprima. Salva le modifiche, quindi controlla la sezione per verificare che il layout delle schede sia corretto.