Problem Mobile Ansicht

04/04/2015 18:18 Bently.#1
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:

Nun der CSS-Bereich:

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:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

Wie es normal aussieht ohne das ich es verschiebe oder nach links scrolle:
[Only registered and activated users can see links. Click Here To Register...]

LIVE DEMO:
[Only registered and activated users can see links. Click Here To Register...]
Der Bereich ist " un gefixt" die anderen gehen alle hervorragend:

[Only registered and activated users can see links. Click Here To Register...]

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.
04/04/2015 18:48 Synatex#2
Bootstrap hat ein komplettes Column-System, warum nutzt du dies nicht?

Infos zum Gridsystem findest du hier: [Only registered and activated users can see links. Click Here To Register...]

Ein Beispiel für dein Ding wäre nun:

Code:
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
und dort deine Features reinpacken. Dann wäre das ganze auch responsive.
04/05/2015 22:06 Bently.#3
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)
[Only registered and activated users can see links. Click Here To Register...] (Dies müssten Sie dann mit Ihren Mobilen Gerät besuchen). Aber eigentlich sollte das Problem zu verstehen sein.
04/05/2015 23:09 ~ JWonderpig ~#4
Code:
margin-top: -20px
Einfach entfernen und dann geht es.
Wenn du die -20px nur in der Desktopversion brauchst, musst du dir mal die Media Queries anschauen
04/05/2015 23:18 MrDami123#5
Soweit ich das sehe musst du das extra konfigurieren. Ne CSS Klasse, die die Auflösung checkt und die Größe der den Icons zugeordneten Klasse anpasst.

Beispiel:
Code:
<style>
.resize {
        font-size: 20px;
    }

    @media (max-width: 600px) {
      .resize {
        font-size: 75px;
      }
    }
</style>

<div class="resize">a</div>
04/05/2015 23:22 ~ JWonderpig ~#6
Solange er das margin-top: -20px drin hat, ist es egal, wie groß die Icons sind. So werden sie immer in den Text gezogen ;)
04/06/2015 01:58 Bently.#7
Danke an euch hab's aber per @Media Querie's geregelt.
#Closed