Mobile Ansicht Problem

[nostring]

Guten Tag,

Ich arbeite zurzeit an einem Projekt , jedoch habe ich ein Problem mit der Mobilen Ansicht. Da ich mich mit den Ansichten der Mobilen Sicht noch nicht derzeit intensiv beschäftigt habe , wollte ich es hier mal versuchen um eine Lösung zu finden.

Kommen wir erstmal zu den Codes. des HTML-Bereichs:

Spoiler: HTML-Bereich

<div id="extra" class="container-new">
        <div class="title">
            <h2>Einf&uuml;hrung</h2>
            <span class="byline">So geht's! Anmelden , Seite erstellen und mit der ganzen Community <b>teilen</b></span> </div>
        <div id="three-column">
            <div class="boxA">
                <div class="box"> <span class="glyphicon glyphicon-user" style="font-size:60px; margin-bottom:20px; margin-top:-20px;"></span>
                    <p>Melde dich <b>kostenlos</b> an und werde ein Teil der Community!</p>
                </div>
            </div>
            <div class="boxB">
                <div class="box"> <span class="glyphicon glyphicon-pencil" style="font-size:60px; margin-bottom:20px; margin-top:-20px;"></span>
                    <p>Erstelle deine <b>eigene</b> Seite und gestalte die wie du es gerne haben m&ouml;chtest.</p>
                </div>
            </div>
            <div class="boxC">
                <div class="box"> <span class="glyphicon glyphicon-globe" style="font-size:60px; margin-bottom:20px; margin-top:-20px;"></span>
                    <p>Teile Sie anschließend mit der <b>ganzen</b> Community!</p>
                </div>
            </div>
        </div>
    </div>

Nun der CSS-Bereich:

Spoiler: CSS-Bereich

.container-new {
overflow: hidden;
margin: 0em auto;
width: 1000px;
}


#extra {
overflow:hidden;
padding: 5em 0em;
}

#extra h2 {
font-size:2.5em;
}

#extra .title {
text-align:center;
margin-bottom:2em;
}

   
.title .byline {
font-size: 1.7em;
color: #6F6F6F;
}

.boxA , .boxB , .boxC {
width: 320px;
}

.boxA , .boxB{
float: left;
margin-right: 20px;
}
   
.boxC {
float: right;
}

.box {
padding: 3em 2em 2em 2em;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 8px;
text-align: center;
}



.glyphicons {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Ich habe es schon mit @media only screen and (max-width:400px) {
#extra {
width:300px;
}
}
probiert jedoch hat es keine Auswirkung.

Das Problem als Bild:
http://www.prntscr.com/6phe5n
http://www.prntscr.com/6pher9

Wie es normal aussieht ohne das ich es verschiebe oder nach links scrolle:
http://www.prntscr.com/6phf3m

LIVE DEMO:
http://www.sitecreator.lima-city.de/sitecreator
Der Bereich ist " un gefixt" die anderen gehen alle hervorragend:

http://prntscr.com/6phhe8

Für eine Lösung bedanke ich mich sehr und es wäre toll wenn einer mir noch es erklären kann woran es liegt damit ich das Problem nicht ein zweites mal habe.

 

[Tronjer]

Was genau soll jetzt das Problem sein: Dass der Content im Gegensatz zur Navigation nicht skaliert?

Dazu musst du das Grid-Layout von Bootstrap verwenden.

 

[MrMurphy]

Hallo,

ich sehe es ähnlich wie Tronjer.

Du hast zwar Bootstrap in deine Seite eingebunden, benutzt es aber offensichtlich überhaupt nicht aktiv. Statt dessen erstellst du eigene CSS-Regeln in der my.css, die den Funktionen von Bootstrap aber widersprechen.

Das sind zum Beispiel deine festen Breitenangaben in Pixel.

Bootstrap ist hingegen als ein Responsive System ausgelegt.

Wenn du Bootstrap in deine Seite einbindest solltest du die Funktionen von Bootstrap auch lernen und anwenden. Eigene CSS-Angaben sind dann im Regelfall nur für die persönliche Optik erforderlich, also Farben, Ränder und ähnliches.

Um dein Problem zu lösen musst du also dein CSS entfernen und durch Bootstrap-Angaben im Quelltext ersetzen.

Das Lernen und Verstehen von Bootstrap können wir dir leider nicht abnehmen. Dazu gibt es im Web aber bereits massenhaft Informationen.

Gruss

MrMurphy

 

[nostring]

Ja habe ich auch bemerkt , zwar dumm von mir das ich selbst ne eigene CSS erstellt und geschrieben habe aber das von Bootsrap mit den Grip war mir ja noch nicht bekannt da ich ein Neueinsteiger darin bin aber trotzdem vielen Dank. Letze Frage , damit könnte ich aber genau das so gestalten wie es im Bild dargestellt ist oder?

 

[MrMurphy]

Hallo,

Letze Frage , damit könnte ich aber genau das so gestalten wie es im Bild dargestellt ist oder?

Um die Frage zu beantworten fehlt eine genaue Problembeschreibung von dir. Also wie die Seite sich verhalten soll.

zwar dumm von mir das ich selbst ne eigene CSS erstellt und geschrieben habe

Nein, um eigene CSS-Angaben wirst du im Endeffekt nicht herumkommen. Du solltest nur soweit möglich zunächst die bereits von Bootstrap angebotenen Möglichkeiten nutzen. Wenn du Wünsche hast, die nicht mit Bootstrap-Mitteln gelöst werden können ist eigenes CSS erforderlich.

Gruss

MrMurphy

 

[nostring]

Ja da haben Sie recht. Ich habe es jetzt schon gefixt bekommen nur stört mich eine winzige Sache an der Mobilen Ansicht: Da ich die Glypicons eine Font-Size von 50-60px gegeben habe, überschreiten sie einfach den Text. bzw:
Das Bild ist auf dem Text wenn ich die Font-size auf 10-20 reduziere passt es nur dann sind die Glypicons viel zu klein. Gibt's ne Möglichkeit dies zu ändern? Falls Sie nicht genau wissen was das Problem ist , ist hier ein Preview (Live Demo)
http://www.sitecreator.lima-city.de/testpage/ . (Dies müssten Sie dann aber mit Ihrem Mobilen Gerät besuchen.) Aber eigentlich sollte das Problem zu verstehen sein.

 

[Tronjer]

Dafür sind Media-Queries da. Um analog zur Breite des Viewports CSS-Attribute zu vergeben.

 

[MrMurphy]

Hallo

Gibt's ne Möglichkeit dies zu ändern?

Die HTML/CSS-Grundlagen lernen und anwenden.

Eine Webseite ist eine Gesamtkonstruktion, bei der die Einzelelemente und Einzelanweisungen zusammenwirken müssen.

Deshalb sollte man sich natürlich an die Grundlagen ("Vorschriften") von HTML und CSS halten. Schließlich sind darauf auch die Endgeräte der Besucher ausgelegt, in der Mehrheit Browser.

Und dann gibt es noch die ungeschriebenen Vorschriften, die sogenannten "Best Practices". Das sind sinnvolle Vorgehensweisen, die sich in der Praxis bewährt haben.

Grade in Zeiten, in denen sich die Ausgabegeräte in immer kürzeren Abständen ändern und neue hinzukommen wird das immer wichtiger und ist Grundlage für Webseiten, die auf fast allen Ausgabegeräten und Browsern funktionieren. Auch solchen, die es noch gar nicht gibt.

Nach der Theorie soll aber auch etwas Praxis nicht zu kurz kommen:

Du hast den Satz

So geht's! Anmelden , Seite erstellen und mit der ganzen Community teilen

in ein h2-Element eingeschlossen. Das ist sachlich falsch, ein Satz gehört in ein p-Element. (Nur mal so zum warmwerden)

Außerdem solltest du auf Inline-CSS verzichten. Das erschwert die Lesbarkeit des Quelltext und spätere Überarbeitungen. Das sind die CSS-Anweisungen, die mit "style=" beginnen. (Statt einer musst du so bereits in dem kurzen Quelltext drei Änderungen durchführen, dazu komme ich gleich)

Dann schwirrt hinter dem Satz ein sinnfreies br-Element rum. Weglassen.

Jetzt nähern wir uns allmählich deinem Problem:

In der h2-Überschrift hast du einen margin-bottom von 2em vergeben. Dann folgt das sinnfreie br-Element.

Dann folgen die 3 div mit den Icons. Die wolltest du wohl näher an der h2-Überschrift haben. Anstatt aber den margin-bottom der h2-Überschrift zu verringern, hast du den drei Icons jeweils ein margin-top von -20px verpasst. Damit holst du dir Teufel und Hölle auf deine Webseite.

Von negativen margin sollte man grundsätzlich die Finger lassen. Abstände werden mit positiven Werten hergestellt.

Sachlich gehört der Abstand auch zu dem umgebenden div.

So ziehst du die Icons aus dem sie umgebenden div nach oben in den margin-Bereich der darüberstehenden h2-Überschrift, wobei das br-Element zusätzlich undefinierte Auswirkungen hat. Und zwar bei allen 3 div einzeln.

Eine ganz üble Konstruktion.

Wenn die 3 div dann bei schmalen Fenstern untereinanderrutschen stößt der negative margin des ersten div noch an die h2-Überschrift. Die negativen margin der beiden folgenden div jedoch an das jeweils darüber stehende div.

Jetzt kommt die von mir bereits angesprochene Vielfalt der Geräte ins Spiel.

Auf einem Stand-Alone-Bildschirm scheint noch alles zu funktionieren. Dort sind Pixel noch Pixel.

Auf Smartphones und Tablets sind Pixel jedoch nicht mehr Pixel. Stichwort: Retina-Display und ähnliche Lösungen. Stark vereinfacht gesagt wird ein Pixel in mehrere aufgeteilt um die Schärfe zu erhöhen. Es werden also alle möglichen Größenangaben hin- und hergerechnet.

Spätestens dann fliegt dem Webseitenersteller, in diesem Fall dir, sein unsauberer Quelltext um die Ohren.

Um erst mal das Problem zu beseitigen solltest du keine negativen Abstände benutzen. Die sind in über 99% aller Fälle schlicht falsch.

Dann solltest du margin und padding den passenden Elementen zuordnen. In deinem Fall also

1. die negativen margin-top der drei Icon entfernen

2. das margin-bottom der h2-Überschrift verringern, dabei am besten h2 gleich durch p ersetzen

Insgesamt solltest du natürlich die Grundlagen und Best Practices von HTML und CSS beachten. Du siehst ja, wie dir schon eine Seite mit ganz wenig Inhalt um die Ohren fliegt. Bei größeren Seiten potenziert sich erfahrungsgemäß das Problem.

Gruss

MrMurphy