hilfe bei mobiler ansicht

IronEagle · 10. Januar 2020

leider bekomme ich es alleine nicht hin und frage deswegen ob mir da einer evtl. kurz helfen mag.

folgenden code habe ich

Code

<center>
<div class="boxContent">
        <div class="row">
            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-align-justify"></span>
                        <span><a href="/article-list/">Bekanntmachungen</a></span>
                    </h2>
                    <div class="boxContent">
Immer auf dem aktuellsten Stand. Unsere Aushänge, Eure Gemeinschaftsstunden, kleinere Hilfen, allgemeine Informationen und Interessantes findet Ihr hier.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
    
            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-camera"></span>
                        <span><a href="/gallery/">Galerie</a></span>
                    </h2>
                    
                    <div class="boxContent">
Bilder von Festen und aus Euren Gärten. Zeigt doch einmal Eure Blumenpracht und gebt Euren Bildern die ideale Umgebung, um sie zu zeigen und mit uns zu teilen.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div> 

            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-book"></span>
                        <span><a href="/mcgb/">Gästebuch </a></span>
                    </h2>
                    
                    <div class="boxContent">
Hier könnt Ihr uns einen lieben Gruß hinterlassen, Feedback zur Seite geben oder Eure eigene Seite vorstellen. Jeder kann hier schreiben.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div> 

        
            <div class="col-xs-12 col-md-4"><br>
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-calendar"></span>
                        <span><a href="/calendar/">Kalender</a></span>
                    </h2>
                    
                    <div class="boxContent">
Hier werden Aushänge, Veranstaltungen terminiert und Euch angezeigt. Nette Erweiterungen unterstützen uns bei der Planung und zeigen Euch zB. Ferien an.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
            
            
                        <div class="col-xs-12 col-md-4"><br>
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-wikipedia-w"></span>
                        <span><a href="/lexicon/">Lexikon</a></span>
                    </h2>
                    
                    <div class="boxContent">
Auf unserer Seite findet Ihr ebenso Inhalte rund um unseren Verein, sondern auch kleinere Erklärungen, was sich hinter bestimmten Begriffen rund ums Gartenleben verbirgt.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
            
            <div class="col-xs-12 col-md-4"><br>
                <section class="box">
                    <h2 class="boxTitle">
                        <span class="icon icon28 fa-user-md"></span>
                        <span><a href="/team/">Team</a></span>
                    </h2>
                    
                    <div class="boxContent">
Der Vorstand und die Obmänner bzw. das Team stellen sich einmal kurz vor. Ihr habt hier die passenden Partner unserer Anlage übersichtlich auf einen Blick.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
            

             </div>
        </div>
</center>

Alles anzeigen

der es so ausschauen lässt

leider aber mobil so

Mir fehlen quasi die leerzeilen in den zwischen 1+2 und zwischen 2+3
egal wie ich es versuche bleibt der erste block zusammen und der 2. block ist so wie ich es möchte.

ja ich bin kein spezialist, ich muss fragen und probieren

Tom · 10. Januar 2020

Das liegt daran das du bei den letzten drei Boxen ein <br> drin hast:

Die müssen weg. Ich poste dir nachher einen CSS-Code für die Abstände.

Tom · 10. Januar 2020

Füge da:

Code

<div class="row">

noch eine Klasse ein:

Code

<div class="row homePageItems">

Und dann:

Code

@include screen-sm-down {

    .homePageItems > div:not(:first-child) {
        margin-top: 30px;
    }

}

IronEagle · 10. Januar 2020

jetzt sieht es allerdings mobil gut aus

aber am pc so

dank deinem

Zitat von Tom

Das liegt daran das du bei den letzten drei Boxen ein <br> drin hast:

habe ich jetzt bei jedem ein <br> eingefügt und es sieht so aus wie gewünscht.

mobil und desktop

ich denke aus deiner sicht ist es nicht schön

Tom · 12. Januar 2020

Zitat von IronEagle

ich denke aus deiner sicht ist es nicht schön

☝️

Aber Hauptsache du bist zufrieden.

IronEagle · 27. Januar 2020

Code

<!----- Anfang ----->
<center>
<div class="boxContent">
        <div class="row">
            <div class="row homePageItems">
<!----- Box Artikel ----->
            
    <div class="col-xs-12 col-md-4">
        <section class="box">
            <h2 class="boxTitle">

                <span class="icon icon28 fa-align-justify"></span>
                <span><a href="/article-list/">Bekanntmachungen</a></span>
            </h2>
        <div class="boxContent">
    Immer auf dem aktuellsten Stand. Unsere Aushänge, Eure Gemeinschaftsstunden, kleinere Hilfen, allgemeine Informationen und             Interessantes findet Ihr hier.
        </div>
    <hr class="boxContentSeparator">
        </section>
    </div>

<!----- Box Galerie ----->
            
            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        
                        <span class="icon icon28 fa-camera"></span>
                        <span><a href="/gallery/">Galerie</a></span>
                    </h2>
                    
                    <div class="boxContent">
Bilder von Festen und aus Euren Gärten. Zeigt doch einmal Eure Blumenpracht und gebt Euren Bildern die ideale Umgebung, um sie zu zeigen und mit uns zu teilen.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div> 
            
<!----- Box Gästebuch ----->            

            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        
                        <span class="icon icon28 fa-book"></span>
                        <span><a href="/mcgb/">Gästebuch </a></span>
                    </h2>
                    
                    <div class="boxContent">
Hier könnt Ihr uns einen lieben Gruß hinterlassen, Feedback zur Seite geben oder Eure eigene Seite vorstellen. Jeder kann hier schreiben.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div> 

<!----- Box Kalender ----->
            
            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        
                        <span class="icon icon28 fa-calendar"></span>
                        <span><a href="/calendar/">Kalender</a></span>
                    </h2>
                    
                    <div class="boxContent">
Hier werden Aushänge, Veranstaltungen terminiert und Euch angezeigt. Nette Erweiterungen unterstützen uns bei der Planung und zeigen Euch zB. Ferien an.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
            
<!----- Box Lexikon ----->    
            
                        <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        
                        <span class="icon icon28 fa-wikipedia-w"></span>
                        <span><a href="/lexicon/">Lexikon</a></span>
                    </h2>
                    
                    <div class="boxContent">
Auf unserer Seite findet Ihr ebenso Inhalte rund um unseren Verein, sondern auch kleinere Erklärungen, was sich hinter bestimmten Begriffen rund ums Gartenleben verbirgt.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>

<!----- Box Team ----->
            
            <div class="col-xs-12 col-md-4">
                <section class="box">
                    <h2 class="boxTitle">
                        
                        <span class="icon icon28 fa-user-md"></span>
                        <span><a href="/team/">Team</a></span>
                    </h2>
                    
                    <div class="boxContent">
Der Vorstand und die Obmänner bzw. das Team stellen sich einmal kurz vor. Ihr habt hier die passenden Partner unserer Anlage übersichtlich auf einen Blick.
                    </div>
                    <hr class="boxContentSeparator">
                </section>
            </div>
            
<!----- Box Ende ----->
             </div>
            </div>
    </div>
</center>

Alles anzeigen

Zitat von Tom

Aber Hauptsache du bist zufrieden.

nö....

habe es jetzt so gemacht wie du empfholen hast, da es mir doch keine ruhe gelassen hat und ich weiter probiere.

der oben genannte code ist so wie ich ihn jetzt habe und du mitgeteilt hast, welcher mobil genauso ausschaut wie gewünscht, aber am pc aber keinen abstand zwischen den 2 reihen hat?

wie bekomme ich denn jetzt am pc 2 reihen hin?

Tom · 27. Januar 2020

Kannst du den Code erst mal ändern:

Code

<!----- Anfang ----->
<div class="boxContent">
    <div class="row homePageItems">
        
        !----- Box Artikel ----->
        
         <div class="col-xs-12 col-md-4">
             <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-align-justify"></span>
                    <span><a href="/article-list/">Bekanntmachungen</a></span>
                </h2>
              <div class="boxContent">Immer auf dem aktuellsten Stand. Unsere Aushänge, Eure Gemeinschaftsstunden, kleinere Hilfen, allgemeine Informationen und Interessantes findet Ihr hier.
              </div>
              <hr class="boxContentSeparator">
          </section>
        </div>

        <!----- Box Galerie ----->
        
        <div class="col-xs-12 col-md-4">
            <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-camera"></span>
                    <span><a href="/gallery/">Galerie</a></span>
                </h2>
                <div class="boxContent">
                    Bilder von Festen und aus Euren Gärten. Zeigt doch einmal Eure Blumenpracht und gebt Euren Bildern die ideale Umgebung, um sie zu zeigen und mit uns zu teilen.
                </div>
                <hr class="boxContentSeparator">
            </section>
        </div> 
        
        <!----- Box Gästebuch ----->               

        <div class="col-xs-12 col-md-4">
            <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-book"></span>
                    <span><a href="/mcgb/">Gästebuch </a></span>
                </h2>
                <div class="boxContent">
                    Hier könnt Ihr uns einen lieben Gruß hinterlassen, Feedback zur Seite geben oder Eure eigene Seite vorstellen. Jeder kann hier schreiben.
                </div>
                <hr class="boxContentSeparator">
            </section>
        </div> 

        <!----- Box Kalender ----->
        
        <div class="col-xs-12 col-md-4">
            <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-calendar"></span>
                    <span><a href="/calendar/">Kalender</a></span>
                </h2>
                <div class="boxContent">
                    Hier werden Aushänge, Veranstaltungen terminiert und Euch angezeigt. Nette Erweiterungen unterstützen uns bei der Planung und zeigen Euch zB. Ferien an.
                </div>
                <hr class="boxContentSeparator">
            </section>
        </div>
        
        <!----- Box Lexikon ----->     
        
        <div class="col-xs-12 col-md-4">
            <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-wikipedia-w"></span>
                    <span><a href="/lexicon/">Lexikon</a></span>
                </h2>
                <div class="boxContent">
                    Auf unserer Seite findet Ihr ebenso Inhalte rund um unseren Verein, sondern auch kleinere Erklärungen, was sich hinter bestimmten Begriffen rund ums Gartenleben verbirgt.
                </div>
                <hr class="boxContentSeparator">
            </section>
        </div>

        <!----- Box Team ----->
        
        <div class="col-xs-12 col-md-4">
            <section class="box">
                <h2 class="boxTitle">
                    <span class="icon icon28 fa-user-md"></span>
                    <span><a href="/team/">Team</a></span>
                </h2>
                <div class="boxContent">
                    Der Vorstand und die Obmänner bzw. das Team stellen sich einmal kurz vor. Ihr habt hier die passenden Partner unserer Anlage übersichtlich auf einen Blick.
                </div>
                <hr class="boxContentSeparator">
            </section>
        </div>
    
    </div>
</div>

Alles anzeigen

dann schaue ich mal drüber.

IronEagle · 27. Januar 2020

Zitat von Tom

Kannst du den Code erst mal ändern

verstehe ich nicht sorry...

was ändern...in was ändern...wo ändern...

Tom · 27. Januar 2020

Na deinen Code durch meinen Code ersetzen.

IronEagle · 27. Januar 2020

ok ist drin

allerdings kein unterschied, ausser zeile 5 kleiner fehler...

ansicht ist am pc unverändert

hilfe bei mobiler ansicht

cls-design

Informationen

Demoinstallationen

Hilfe