Un utente ha chiesto informazioni su Storefront di Wordpress

Blocca l’immagine a larghezza intera su dispositivo mobile

Un utente ha chiesto 👇

Salve,

Se inserisco un blocco immagine e lo imposto a tutta larghezza / allineato, funziona sul desktop (larghezza minima: 66.4989378333em?) Ma su un telefono cellulare, ha lo stesso aspetto di Larghezza / allineato.

Cosa posso fare per ottenere un blocco immagine a larghezza intera su un telefono cellulare?

Grazie

(@phillipwoo)

2 anni, 1 mese fa

Ciao,

Ho qualche problema a replicare questo problema sul mio sito di prova. Potete per favore fornirmi screenshot di quanto segue?

Front-end desktop All’estremità anteriore della pagina in un blocco di immagini per dispositivi mobili e in un blocco delle impostazioni di back-end

Potrebbe essere necessario creare una regola specifica per i dispositivi mobili nel CSS per apportare le modifiche necessarie. Restituiscimi queste informazioni e dovremmo essere in grado di vedere cosa si può fare.

Grazie!

Lanciatore di thread

(@saowp)

2 anni, 1 mese fa

Grazie per il puzzle! guarda a https://testfullwidthimage.000webhostapp.com/ su browser / scene desktop e mobili. Schermate di seguito:

https://testfullwidthimage.000webhostapp.com/desktop_screenshot

https://testfullwidthimage.000webhostapp.com/mobile_screenshot

Lanciatore di thread

(@saowp)

2 anni, 1 mese fa

<!-- wp:image {"id":7,"align":"full"} -->
<figure class="wp-block-image alignfull"><img src="https://testfullwidthimage.000webhostapp.com/wp-content/uploads/2019/03/IMG_20190310_101058-1024x768.jpg" alt="" class="wp-image-7"/><figcaption>Full width</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":7,"align":"wide"} -->
<figure class="wp-block-image alignwide"><img src="https://testfullwidthimage.000webhostapp.com/wp-content/uploads/2019/03/IMG_20190310_101058-1024x768.jpg" alt="" class="wp-image-7"/><figcaption>Wide width</figcaption></figure>
<!-- /wp:image -->

(@phillipwoo)

2 anni, 1 mese fa

Dopo aver esaminato i CSS, questa funzionalità sembra intenzionale. Quello che stai vedendo è il modo in cui gli sviluppatori del tema hanno deciso di gestire le immagini a larghezza intera su dispositivi mobili. Le impostazioni che rendono l’immagine a larghezza intera per i browser desktop non funzionano allo stesso modo in un telefono cellulare, quindi questa sembra essere la soluzione che il team di sviluppo ha deciso.

Lanciatore di thread

(@saowp)

2 anni, 1 mese fa

Grazie per la tua risposta. La mia domanda non riguardava la competenza o meno di questo comportamento, ma:

Se desidero un’immagine a tutta larghezza su un telefono cellulare utilizzando il tema Blocco immagini e Vetrina negozio, cosa devo fare per farlo accadere?

Spero che la mia domanda sia chiara, fammi sapere in caso contrario e cercherò di spiegare ulteriormente.

(@phillipwoo)

2 anni, 1 mese fa

Devi concentrarti sul .alignfull Classe CSS in modo che superi la col-ful Una classe CSS che sta spingendo tutto per avere margini su un telefono cellulare. Un breve test mi mostra che puoi aggiungerlo al tuo CSS personalizzato e dovrebbe superare i margini per tutto con l’estensione .alignfull Classe CSS:

.alignfull {
margin-left: -1.41575em;
margin-right: -1.41575em;
}

Potrebbe essere necessario regolare un po ‘le cose, ma questo dovrebbe darti l’aspetto di base che stai cercando di ottenere. Fammi sapere come va.

Grazie!

Was this helpful?

0 / 0

Lascia un commento 0

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