Un utente ha chiesto informazioni su GeneratePress di Wordpress

Risposta alle immagini: senza indurimento?

Un utente ha chiesto 👇

Ciao,
Non sono sicuro che sia possibile, ma non puoi impostare un metodo reattivo con le immagini in un medico di famiglia.
Di conseguenza, utilizzo un plug-in envira che mi piace per desktop ma per le immagini in un telefono cellulare impilato – non c’è controllo reattivo mobile nella versione gratuita.
Un costruttore di elemntor funziona in modo responsabile riducendo la larghezza del 50% ma non funziona bene sul desktop. Posso disabilitare la parte desktop ma non posso (viceversa) disabilitare il cellulare in envira.
Hai qualche dubbio se lo stacking si interrompe in qualche modo e consente alle tue immagini di sedersi diciamo 1 × 2 in un telefono cellulare – 1 colomba 2 di fila.
Grazie sempre 🙂

Nota: l’utilizzo della V2.2 – l’acquirente premium GP precedente ma trascorso 1 anno, ovvero nessun accesso al forum, verrà aggiornato il mese prossimo.

(@diggeddy)

1 anno, 2 mesi fa

Ciao,

I controlli GP reattivi si applicano solo agli elementi del tema, non al contenuto del post.
Non posso davvero fornire supporto su come “correggere” il display o gli elementi reattivi di envira, qualcosa di cui dovresti parlare con il loro supporto.

Alcuni CSS potrebbero essere d’aiuto se stessi usando solo il Blocco galleria centrale e potessi fornire un collegamento al sito.

Lanciatore di thread

(@ rob33)

1 anno, 2 mesi fa

Ciao David,
Si riferiva solo a come voglio che le immagini appaiano essenzialmente reattive.

Alcuni CSS sarebbero magici, ho rimosso la scorciatoia envira e ho impostato la normale galleria di immagini wp su 6 colonne – 6 immagini. Idealmente mi è piaciuto il modo in cui enviro li ha organizzati in modalità desktop, per favore vedi ss con un segno di spunta accanto – solo 1px tra ogni immagine penso – quindi la domanda a margine è se questo sia possibile anche nell’attuale galleria wp?

Per un aspetto reattivo, ora sembrano una linea rigida di sei invece di impilare uno sopra l’altro. Ma come messo in dubbio idealmente 1 x 2 – 1 riga x 2 x colonna (immagini) è preferibile.

La dimensione effettiva dell’immagine delle 6 immagini è 290 x 305. Una volta impilate, le allunga.

sito: teojobs.com

http://teojobs.com/wp-content/uploads/2020/01/images-top-of-home.jpg

grazie David.

Questa risposta è stata modificata 1 anno, 2 mesi fa.

(@diggeddy)

1 anno, 2 mesi fa

Prova questo CSS:

.site-main .gallery {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1px;
    margin-right: -1px;
}
.site-main .gallery .gallery-item {
    max-width: 100%;
    flex: 1 0 16%;
}

.site-main .gallery .gallery-icon {
    padding: 1px;
}

@media (max-width: 768px) {
    .site-main .gallery .gallery-item {
        flex: 1 0 50%;
    }
}

Lanciatore di thread

(@ rob33)

1 anno, 2 mesi fa

Oh, funziona magnificamente, ma in modalità tablet allunga le immagini mentre si comporta come le tue risposte mobili, immagino. Sarebbe possibile ottenere CSS extra per tablet?
Se è possibile, grazie a David.

Questa risposta è stata modificata 1 anno, 2 mesi fa.

(@diggeddy)

1 anno, 2 mesi fa

Prova questo:

.site-main .gallery {
    display: flex;
    flex-wrap: wrap;
    margin-left: -1px;
    margin-right: -1px;
}

/* Desktop */
.site-main .gallery .gallery-item {
    max-width: 100%;
    flex: 1 0 16%;
}

.site-main .gallery .gallery-icon {
    padding: 1px;
}

/* Tablet Devices */
@media (max-width: 1024px) and (min-width: 600px) {
    .site-main .gallery .gallery-item {
        flex: 1 0 33%;
    }
}

/* Mobile Devices */
@media (max-width: 599px) {
    .site-main .gallery .gallery-item {
        flex: 1 0 50%;
    }
}

Impostazioni separate per tablet: è possibile ridurre la larghezza massima di conseguenza.

Lanciatore di thread

(@ rob33)

1 anno, 2 mesi fa

Grazie – quasi, ma ora le immagini del desktop funzionano come nei tablet – essendo allungate a 3 di fila.

(@diggeddy)

1 anno, 2 mesi fa

Regola questo max-width: 1024px riducilo a 768px se necessario

Lanciatore di thread

(@ rob33)

1 anno, 2 mesi fa

Mi spiace, che in modalità Personalizza in GPress sembrano così su un desktop, nell’impostazione normale del sito web sono OK 🙂
Con il tablet – per impostare tutte e 6 le immagini nella parte superiore, probabilmente cambio% a 16.6 e ora vengono visualizzate una dopo l’altra sul desktop e sul tablet mentre eseguo la personalizzazione GP e sono ok sul desktop al di fuori del personalizzatore – ma controllare questo il modo giusto per andare?

Grazie.

(@diggeddy)

1 anno, 2 mesi fa

Se funziona, allora è vero 🙂

Lanciatore di thread

(@ rob33)

1 anno, 2 mesi fa

Grande impegno.

(@diggeddy)

1 anno, 2 mesi fa

Prego

Was this helpful?

0 / 0

Lascia un commento 0

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