devo solo creare l'html/css a mio piacere
perfetto, allora direi che il primo step è risolto a livello HTML. Se tu vuoi, possiamo passare alla parte CSS per vedere come puoi impostarla al meglio, magari non proprio "a tuo piacere"
diversi modi per creare colonne a volte funzionano ed a volte no. I classici float mi sembrano più solidi, solo che flex mi sembrava che facesse le cose con meno righe.
Non puoi fare un paragone superficiale di due tecniche differenti come float e flex.
Anche se ognuna agisce in modo specifico secondo le proprie caratteristiche, ogni cosa nel CSS va valutata nel contesto in cui è posta, dove possono esserci molteplici altri fattori e regole CSS che influiscono sul risultato.
Un errore comune è pensare che ogni "comando" CSS sia fine a sé stesso. Capisco che se non si hanno le dovute conoscenze su tutte le varie caratteristiche CSS, può risultare difficile capire certi meccanismi per ottenere dei risultati adeguati nei diversi contesti.
Lascia perdere il secondo esempio, dove viene usato il background, che (ribadisco) nel tuo caso serve a poco.
Direi di vedere invece come va impostato quel object-fit.
Non vedo però la tua pagina aggiornata con quello che hai provato a fare. Sarebbe utile magari andare di pari passo così da evitare possibili imprecisioni.
Hai scritto di aver provato così:
codice HTML:
<div class="calmodalflex-item-left"><div class="calmodal-logo">[post_image]</div></div>
... ma non vorrei che tu abbia tolto delle classi essenziali che servono per far funzionare il codice originale.
La struttura originale infatti è questa:
codice HTML:
<div class="calmodal-flex-container">
<div class="calmodalflex-item-left">[post_image]</div>
<div class="calmodalflex-item-right"> ...the texts... </div>
</div>
Se tu hai semplicemente sostituito la classe calmodalflex-item-left con la tua nuova calmodal-logo, certamente il giocattolo si romperà.
Quindi chiariamo questo punto: la tua classe va aggiunta assieme a quelle eventualmente già esistenti.
Potrebbe essere una cosa del genere:
codice HTML:
<div class="calmodal-flex-container">
<div class="calmodalflex-item-left calmodal-logo">[post_image]</div>
...
</div>
In questo modo nel CSS saranno mantenuti tutti i riferimenti originali alla classe calmodalflex-item-left (che serve ad applicare chissà quali proprietà e/o funzionalità), mentre tu potrai riferirti a quello stesso elemento, ma in maniera più specifica, usando la tua classe calmodal-logo.
Questo ti è chiaro?
Prima di proseguire dammi conferma