Un utente ha chiesto informazioni su GeneratePress di Wordpress

CSS non funziona con iPad alla luce del paesaggio

Un utente ha chiesto 👇

Ciao,

Ho 3 widget piè di pagina sulla mia home page. Indipendentemente dalla quantità di materiale in ciascuno, volevo che fossero di dimensioni uguali. Leo mi ha gentilmente aiutato a raggiungere questo obiettivo:

@media (min-width: 769px)  {
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
    display: flex;
    }
}
/* match size of 1 & 3, to 2 */

Funziona esattamente come richiesto per desktop, iPad in verticale e dispositivi mobili. Per qualche motivo, però, non funziona per iPad in orizzontale (il widget 3 è troppo grande).

Ho passato ore a provare varie “soluzioni” disponibili su Internet (incluso il collegamento fornito da Tom qui: https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css/26861229#26861229) ma nessuna parte funziona. Confesso di essere inseguito e di chiedere aiuto, per favore 🙂

(@leohsiang)

11 mesi fa

Ciao,

Prova anche ad aggiungere questo SEC:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets>div {
        margin-bottom: 0;
    }
}

Lanciatore di thread

(@richieps)

11 mesi fa

Ciao Leo,

Eccellente – Questo si sta decisamente muovendo nella giusta direzione. 🙂

Il widget 3 ora ha la stessa altezza dei widget 1 e 2, che è quello che volevo.

Tuttavia, è ancora molto più ampio degli altri due widget: sembrano essere circa il 25% ciascuno e il 50%. Possiamo scoprire che avranno la stessa larghezza e la stessa altezza? (Dita incrociate!)

(@leohsiang)

11 mesi fa

Prova questo:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets .tablet-grid-50 {
        width: 33%;
    }
    .active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
        width: 33%;
    }
}

Lanciatore di thread

(@richieps)

11 mesi fa

Ciao Leo,

Grazie ancora.

Questo dà la stessa larghezza a tutti e 3 i widget, ma ora il terzo è di nuovo più alto. E, in termini di ritratti su tablet, i widget ora si impilano uno sopra l’altro invece di essere uno accanto all’altro.

Voglio fare qualcosa che sia al di fuori dei limiti del tema? Fammi sapere se non è possibile perché non voglio sprecare il tuo tempo.

(@leohsiang)

11 mesi fa

Hai rimosso il CSS Flexbox aggiunto in precedenza?

Lanciatore di thread

(@richieps)

11 mesi fa

Ciao Leo,

Mi dispiace, voglio fare tutto quello che posso, invece di fare affidamento su di te. Quello che ho al momento è:

@media (max-width: 599px) {
    .footer-widgets .widget > div {
        padding: 10px;
    }
}
/* Mobile */

@media (max-width: 899px)  and (min-width: 600px) {
    .footer-widgets .widget > div {
        padding: 10px;
    }
}
/* Tablet - portrait */

@media (max-width: 1199px) and (min-width: 900px) {
    .inside-footer-widgets .tablet-grid-50 {
        width: 33%;
        clear: none !important;
    }
    .active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
        width: 33%;
    }
}
/* Tablet - landscape */

@media (min-width: 1200px)  {
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
    display: flex;
    }
}
/* Desktop */

Con questo, le presentazioni su dispositivo mobile, desktop e tablet con ritratto sono come le voglio. La presentazione orizzontale del tablet è quasi arrivata: è solo che il 3 ° widget viene mostrato sul set successivo invece che accanto al 2 ° widget.

Grazie,
Richie

(@leohsiang)

11 mesi fa

È difficile scrivere molte domande dai media per occuparsi di tutti i tablet in modalità verticale e orizzontale.

È questa la domanda?
https://www.screencast.com/t/KbSw9yYC6i

Se è così, vedi che la SEC specifica non è stata ancora decrittografata.

Lanciatore di thread

(@richieps)

11 mesi fa

Ciao Leo,

Sì, sembra che la cache non sia stata cancellata per qualche motivo – ora lo è.

Penso che la formattazione dei conteggi condivisi stia aggiungendo ai nostri problemi. L’ho modificato in modo che ora ci sia solo un margine di 1 pixel tra i pulsanti.

Le cose sono abbastanza vicine adesso. Se non hai altre parole di saggezza, posso lasciare le cose come sono adesso e tornarci più tardi 😉

Lanciatore di thread

(@richieps)

11 mesi fa

Idea in più …

Sarebbe più facile, più difficile o qualcosa di diverso se abbandonassi completamente i widget del piè di pagina e usassi solo GenerateBlocks per aggiungere un contenitore a 3 colonne in fondo alla pagina e aggiungere contenuti in questo modo?

Lanciatore di thread

(@richieps)

11 mesi fa

Ciao Leo,

Ordinato 🙂

Devo ammetterlo, non sono del tutto sicuro del motivo per cui funziona quanto segue! Ho cambiato le parti che si flettevano poiché i widget 3 erano i più grandi, quindi l’ho cambiato in modo che 1 e 2 si flettessero.

Comunque, grazie per tutto il tuo aiuto nel trovare la soluzione definitiva.

@media (max-width: 1199px) and (min-width: 900px) {
    .inside-footer-widgets > .tablet-grid-50 {
        width: 33.3333%;
    }
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-2 {
    	display: flex;
    }
    .inside-footer-widgets > div {
    	margin-bottom: 0;
    }
}
/* Tablet - landscape */ 

(@leohsiang)

11 mesi fa

Sono contento che tu l’abbia capito!

La questione dei media richiede molti tentativi ed errori 🙂

Lanciatore di thread

(@richieps)

10 mesi fa

Aggiornamento rapido (nel caso qualcun altro abbia problemi simili) …

Guardando indietro alla formattazione qui per la voce Conteggi condivisi nel widget di testo del piè di pagina 3, e un po ‘frustrato dai tentativi infruttuosi di modificare la SEC, mi sono imbattuto in un collegamento dall’autore del plug-in:

https://sharedcountsplugin.com/2019/03/27/display-share-buttons-using-a-shortcode/

Il punto chiave qui è che puoi cambiare l’attributo “location”. Ho modificato la voce di scelta rapida nel widget di testo per leggere – [shared_counts location=”RR-sharedcounts” style=”buttons”]. Quindi ho usato il seguente CSS per ottenere la spaziatura che volevo:

.RR-sharedcounts {
  display: flex;
  justify-content: space-between;
}

(@leohsiang)

10 mesi fa

Grazie per la condivisione!

Was this helpful?

0 / 0

Lascia un commento 0

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