Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15
  1. #1

    Riga con quattro immagini centrate e basta, in WordPress

    Salve, a quanto pare non vado d'accordo con WordPress, e una disposizione di oggetti che da codice realizzo in pochi minuti, con WordPress non vuole saperne di rispettare i canoni del CSS!

    Ho quattro piccole immagini, anteprime di immagini più grandi visibili cliccandoci sopra, una accanto all'altra, seguite da testo.
    Le quattro immagini sono racchiuse in un div dove ho impostato dei banalissimi
    codice:
    text-align: center; margin-left: auto; margin-right: auto; clear: both;
    Se non erro, con tali parametri, magari aggiungendo un display: block, il div dovrebbe essere centrato, e invece sta flottato a sinistra e il testo che segue comincia sulla destra anziché ripartire su una nuova riga.
    A nulla valgono i <br /> alla fine del div, la sostituzione del div con un paragrafo, l'inglobare il testo in un paragrafo! Quel testo si ostina a stare a destra della quarta immagine!

    Ovviamente se faccio Ispeziona pagina da Chrome, il codice risulta sporcato da tag e istruzioni non mie...

    Come posso fare???

  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ciao, ad occhio e croce pare evidente che sia un problema di CSS dovuto allo style del tema in uso. Potresti dare delle classi al tuo custom HTML che hai aggiunto e aggiungere/sovrascrivere regole per questo. Cosi' senza vedere il resto è un po' difficile consigliare.
    PS
    dovresti spostare nella sezione CSS dato che si tratta più di quello.

  3. #3
    Ho già aggiunto del CSS personalizzato, ma WP lo ignora, per questo credo sia una questione più di WP che di CSS...
    Intanto ho provato creando una galleria anziché caricare le singole immagini: risolvo con l'allineamento senza testo accanto, ma in modalità smartphone le immagini restano una accanto all'altra anziché disporsi in colonna. In pratica perdo la responsività...

    Ho installato Gutenberg e creato un blocco galleria: sebbene indichi immagini su 4 colonne (quindi le 4 immagini tutte su una riga), le dispone una sotto l'altra sia in visualizzazione desktop che smartphone, e per giunta ignorando il centramento impostato.

  4. #4
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,654
    Ma non c'e' una pagina da poter vedere? Sarebbe piu' facile aiutare.. O il codice a se stante per questa diciamo gallery.

  5. #5
    Questa è una pagina con Gutenberg http://gasweb.altervista.org/prova/missione-italiana/ Immagini in verticale sebbene impostate per occupare 4 colonne (come tra l'altro avviene nell'anteprima visuale)
    Questa è una pagina con l'editor di WP, con le immagini racchiuse in un div avente gli attributi di classe scritti nel messaggio di apertura http://gasweb.altervista.org/prova/missione-italiana/ Puro codice, non ho usato la galleria classica, che comunque mi blocca le immagini su una riga anche in modalità smartphone.

  6. #6
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Utilizzi un flexbox, ma il container viene impostato come block, quindi perdi l'orientamento dei figli.
    Inoltre il blocco precedente è float, cosa che ti incasina ancora di più.

    Per risolvere puoi:

    togliere la classe .aligncenter dall'elemento ul .wp-block-gallery
    togliere il float da .content-headline

    E le immagini si allineano (non ho controllato da mobile).

  7. #7
    Di mia volontà non sto utilizzando nulla di quello che segnali... E' WP che aggiunge codice e rende vano il mio CSS aggiunto.

    Come faccio a togliere una classe impostata da WP (dal tema, presumo)? Se ricordo bene non si dovrebbe agire sui fogli di stile di WP perché al primo aggiornamento vengono sovrascritti, al massimo posso aggiungere io CSS ma a integrare...

  8. #8
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Non avevo visto bene da dove venivano i css, la parte flex viene dal plugin gutemberg mentre il css con i float viene dal template.

    Ora francamente non conosco gutemberg e quindi posso dirti poco sulla compatibilità dei "vecchi temi", però sembra che il tuo template, che carica il proprio css (con i float) non sia compatibile con i blocchi aggiunti da gutemberg che usa il suo css (con flexbox).

  9. #9
    Nella pagina Ice Island Gutenberg non è usato.

  10. #10
    Utente di HTML.it
    Registrato dal
    Sep 2016
    Messaggi
    783
    Nella pagina che hai linkato: http://gasweb.altervista.org/prova/missione-italiana/

    Viene usato il css di gutemberg per i blocchi come per esempio li.blocks-gallery-item.
    Infatti dagli strumenti di chrome si vede che il css per il blocco viene (anche) caricato da questo file:

    http://gasweb.altervista.org/prova/w...rary/style.css

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.