Ich habe eine Zzeile mit 4 Boxen
[Blockierte Grafik: https://dlgo.de/layout.jpg]
Wird das Fenster nun schmäler werden die boxen auch schmäler und brechen irgendwann um auf das mobile Layout. Dann werden diese alle in einer Spalteuntereinander dargestellt was sehr gut ist.
Bevor die Spalten umbrechen werden sie allerdings zu schmall. Ich möchte das sie eine sagen wir mal Mindestbreite von 200px haben und erst dann umbrechen. Dann auch nicht gleich in eine Spalte mit allen 4 untereinander, sondern erst in 2 Spalten und 2 Zeilen und erst päter in 1 Spalte mit 4 Zeilen.
Daneben sollten die Boxen immer 1 und 2 Zeilen Layout immer die gleiche Höhe haben. Bricht der Text aufgrund der Breite in einer Box in eine Zeile mehr um ändert sich die Höhe de Box. Gleichzeitig sollten die anderen Boxen in der gleichen Zeile die Höhe auch ändern.
Hat jemand eine Idee wie ich das hin bekomme?
Achja, hier noch mein Quellcode:
<div id="section-home-inner">
<article class="section1 one_fourth">
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
</article>
<article class="section1 one_fourth">
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
</article>
<article class="section1 one_fourth">
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
</article>
<article class="section1 one_fourth">
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
<div class="services-builder style1">
<div class="iconimage">
<a href="https://domain.com"><img src="https://domain.com/image.jpg" alt="image"></a>
</div>
<div class="iconmain">
<h3>Header</h3>
<p>text text text text text text</p>
<p class="iconurl"><a class="themebutton" href="https://domain.com">Read More</a></p>
</div>
</div>
</article>
<div class="clearboth">
</div>