Sono riuscito a farlo visualizzare la vista Mobile su Chrome, ma non riesco ancora a farlo visualizzare in modalità mobile su Firefox, Edge o Brave.
Ho bisogno di punti di interruzione (Viewport break points) in tutto il mio codice mobile? Devo inserirli nella sezione Mobile? La maggior parte del mio CSS mobile riguarda solo modifiche di colore, icone dell’intestazione e larghezza della barra laterale, dimensioni di emoji/font. Quindi non sembra che mi servano impostazioni di viewport specifiche.
Sono riuscito a correggere il codice di cui avevo bisogno:
/* ==========================================================================\n MENU A TENDINA MOBILE - STATO ATTIVO\n ========================================================================== */
/* 1. Forza il testo del link attivo a nero */
.d-modal__body .dropdown-menu li.active a,
.d-modal__body .dropdown-menu li.active {
color: #000000 !important;
}
/* 2. Feedback specifico per il tocco (Standard Discourse) */
html.discourse-touch {
/* Rendi il testo nero mentre il dito è premuto */
.d-modal__body .dropdown-menu li a:active {
color: #000000 !important;
}
}
/* 3. Assicurati che gli altri elementi di navigazione seguano la regola */
.dropdown-menu li a {
transition: color 0.1s ease;
}