Problema centratura box div

[KillerWorm]

purtroppo non posso permettermi di ridurle in larghezza perché poi dentro ci sarà del testo.

Ok. Però, se l'elemento contenitore principale ha una dimensione fissa (immagino sia così), puoi capire da te che non puoi far altro che ridurre la larghezza dei box/immagini per farci stare un ulteriore box. Che sia poi agendo direttamente sul file immagine o da proprietà html o dal css, il discorso non cambia.

Potresti provare ad agire da css. In base alle regole applicate sui box (mi riferisco a <div class="masonry width-1-4 height-1-2">
), potresti provare ad apportare queste modifiche:

    .masonry.width-1-4 { width: 186px; } /* anziché 233px */
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 374px; } /* anziché 468px */
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }

Chiaramente, se altri elementi sulla pagina utilizzano tali regole, queste saranno applicate indistintamente. Per cui fai tu le dovute considerazioni.

Inoltre mi pare di capire che tu stia lavorando su un template responsive. In tal caso dovresti assicurarti se, effettuando eventuali modifiche a quei singoli elementi, non si vada a sfasciare in qualche modo la struttura nelle altre risoluzioni, e quindi compromettere il funzionamento del responsive.

[ZeroShift]

Ok. Però, se l'elemento contenitore principale ha una dimensione fissa (immagino sia così), puoi capire da te che non puoi far altro che ridurre la larghezza dei box/immagini per farci stare un ulteriore box. Che sia poi agendo direttamente sul file immagine o da proprietà html o dal css, il discorso non cambia.

Potresti provare ad agire da css. In base alle regole applicate sui box (mi riferisco a <div class="masonry width-1-4 height-1-2">
), potresti provare ad apportare queste modifiche:

    .masonry.width-1-4 { width: 186px; } /* anziché 233px */
    .masonry.height-1-4 { height: 233px; }
    .masonry.width-1-2 { width: 468px; }
    .masonry.height-1-2 { height: 374px; } /* anziché 468px */
    .masonry.width-3-4 { width: 703px; }
    .masonry.height-3-4 { height: 703px; }

Chiaramente, se altri elementi sulla pagina utilizzano tali regole, queste saranno applicate indistintamente. Per cui fai tu le dovute considerazioni.

Inoltre mi pare di capire che tu stia lavorando su un template responsive. In tal caso dovresti assicurarti se, effettuando eventuali modifiche a quei singoli elementi, non si vada a sfasciare in qualche modo la struttura nelle altre risoluzioni, e quindi compromettere il funzionamento del responsive.

Mi sa che dovrò ridurre le immagini, ho provato col tuo sistema e sembra funzionare, almeno nel primo nanosecondo in cui la pagina si carica vedo tutti i box allineati e più piccoli, però poi dopo un attimo il quinto box torna sotto e soprattutto a grandezza normale.
Sto diventando matto, ho pronto tutto il sito e mi manca solo sta cavolata!

[ZeroShift]

Buongiorno, riesumo questa discussione perchè mi si è presentato un problema legato proprio a queste modifiche suggerite sopra, praticamente andando a restringere le immagini come riportato sopra, mi si restringono anche un sacco di altre immagini (proprio altri file, non parlo della stessa immagine linkata) qua e la nel sito, probabilmente perchè seguono la stessa regola, ora mi chiedo quale sia il sistema per far si che la modifica si estenda solo a quella pagina e non al resto del sito, qualcuno gentilmente mi aiuta?