Un utente ha chiesto informazioni su Design Upgrade for LearnDash di Wordpress

Stile della barra di avanzamento

Un utente ha chiesto 👇

Qualche idea sul fatto che la mia barra di avanzamento non mostri realmente l’intera larghezza? Non sembra esserci nulla di giusto in questo lol. https://share.getcloudapp.com/RBuObYD6

Autore del plugin

(@escapecreative)

5 mesi fa

Sono d’accordo che non sembra corretto, ma è così che LearnDash l’ha costruito. Hanno progettato tutto in modo che fosse una singola riga, quindi la larghezza della barra di avanzamento è determinata da 1) la dimensione del contenitore attorno ad essa e 2) la dimensione del testo che contiene.

Il nostro plugin rende la dimensione del carattere un po ‘più grande su molti temi, quindi il problema a volte diventa più evidente con il nostro plugin attivato, ma il problema è con o senza il nostro plugin.

Un’opzione è nascondere il testo “Ultima attività …”, che darà più spazio alla barra di avanzamento.

.ld-course-status-enrolled .ld-progress-stats .ld-progress-steps {
    display: none;
}

Puoi anche nascondere l’etichetta “In corso” se non ti dispiace visualizzarla.

Oltre a questo, ci sono altre modifiche CSS che potresti fare, ma diventano più complicate. Potresti giocare con diverse proprietà flexbox per spostare le cose, o su una seconda riga, ma anche la larghezza dello schermo è una considerazione, quindi entrerebbero in gioco le domande dei media. Diventa banale.

(@ qwik3r)

5 mesi fa

Grazie!

Cerco di fare un pasticcio e di romperlo da solo ma non ho molta fortuna. Quando giochi con una base flessibile, diventa un po ‘più grande ma poi ovviamente riduce le altre 2 colonne.

Autore del plugin

(@escapecreative)

5 mesi fa

Prova ad usarlo flex-wrap: wrap; sull’elemento genitore dove si trova tutto. Quindi puoi impostare la larghezza degli elementi figli, che dovrebbero, una volta oltre il 100%, colpire le cose su una nuova riga.

(@ qwik3r)

5 mesi fa

Ci ho provato, ma non fa niente. ((

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *