No, aspetta, non ci siamo, penso ti stia perdendo in un bicchier d'acqua
Premessa:
Senza offesa ma noto che hai (ancora) delle lacune gravi riguardo il css. Difficile capire e farsi capire quando mancano le basi di utilizzo dello strumento che si sta manovrando. Consiglio, appena hai tempo/possibilità/voglia, di dare una studiata a qualche guida di base CSS.
Quella su HTML.it mi sembra abbastanza valida e completa: Guida CSS di base
In particolare è importante comprendere come leggere un selettore CSS, conoscere i selettori e i combinatori, perlomeno i principali, e imparare ad assemblarli per costruire dei selettori più complessi da usare nei propri elaborati.
Ti ringrazio per l'enorme pazienza
[...]
e interagendo con pazienza come un vero Maestro!
Grazie a te per l'elogio
Tornando in topic, hai aggiornato il sito online?
codice:
#indexpostheight{min-height:350px;overflow:hidden;}
.
in questa pagina soluzionieconomiche.com non vedo nessun elemento con id "indexpostheight"; in tal caso avrebbe ragione di non funzionare.
Bisogna poi capire meglio perché hai usato min-height anziché height.
Ad ogni modo questa è la parte che dovresti risolvere inserendo (o sostituendolo al tuo) l'ultimo codice che ti ho proposto:
codice:
@media (min-width: 992px) {
#main article {
height: 350px;
}
}
Il selettore #main article va letto in questo modo: seleziona tutti gli elementi con nome tag article (<article>) che sono discendenti (diretti o non diretti) dell'elemento con id main.
Gli <article> in quella pagina sono infatti discendenti del <div id="main">, cioè stanno al suo interno anche se non sono figli diretti.
Possiamo riassumere la struttura HTML della tua pagina, in questo modo:
codice HTML:
<div id="main">
<div class="container">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
<div class="container">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
<div class="container">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
<div class="container">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
<div class="container">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
</div>
Ho scelto volutamente di indicare #main per dare maggiore specificità al selettore; il tag <article> infatti potrebbe anche trovarsi in altre sezioni della pagina in cui non si desidera che gli sia applicata tale regola.
Questa regola funziona così come è senza bisogno di modificare l'HTML; basta aggiungerla al CSS personalizzato o quel che è.
La classe col-md-6 invece devi aggiungerla nell'HTML ma non devi specificarla per gli <article>, devi invece applicarla ai relativi elementi .container (<div class="container">).
codice HTML:
<div class="container col-md-6">
<div class="row text-center">
<article class="post col-md-12">
...
</article>
</div>
</div>
.
Sono infatti questi div che devono essere dimezzati, in modo che si possano affiancare a due a due all'interno del contenitore principale #main, il quale possiede la larghezza totale del corpo della pagina e ingloba tutti gli elementi contenenti gli <article>.
Se fossero dimezzati gli <article> li vedresti, sì, dimezzati in larghezza ma, essendo racchiusi dentro un proprio contenitore (<div class="row text-center">), resterebbero sempre impilati uno sopra l'altro perché la loro larghezza fa riferimento a quella data dal loro proprio contenitore, il quale occupa la larghezza intera del corpo della pagina.
Riguardando i vari nostri post, mi accorgo che questi dettagli li avevo omessi pensando forse che quanto avevo indicato fosse sufficiente. Mi rendo conto però che la mancanza di tali dettagli possa averti spinto fuori strada.
Spero comunque di non averti confuso maggiormente. Fai nuovamente qualche prova e vedi se la situazione migliora.