Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 30.07.2019, 18:10
hatschiii hatschiii ist offline
sven34523
neuer user
Thread-Ersteller
 
Registriert seit: 18.12.2007
Beiträge: 52
hatschiii befindet sich auf einem aufstrebenden Ast
Standard Responsive CSS Grid Layout

Ich habe eine Zzeile mit 4 Boxen



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 sagen wir mal eine Mindestbreite von 200px und erst dann umbrechen. Dann auch nicht gleich in eine Spalte mit allen 4 untereinadner, 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:

Code:
<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>

Geändert von hatschiii (30.07.2019 um 18:16 Uhr)
Mit Zitat antworten
Sponsored Links