Problem Mobile Ansicht

[Bently.]

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

PHP Code:

<div id="extra" class="container-new">
        <div class="title">
            <h2>Einfü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ö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

PHP Code:

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



Wie es normal aussieht ohne das ich es verschiebe oder nach links scrolle:


LIVE DEMO:

Der Bereich ist " un gefixt" die anderen gehen alle hervorragend:



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.

[Synatex]

Bootstrap hat ein komplettes Column-System, warum nutzt du dies nicht?

Infos zum Gridsystem findest du hier:

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

<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.

[Bently.]

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)
(Dies müssten Sie dann mit Ihren Mobilen Gerät besuchen). Aber eigentlich sollte das Problem zu verstehen sein.

[~ JWonderpig ~]

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

[MrDami123]

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:

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

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

<div class="resize">a</div>

[~ JWonderpig ~]

Solange er das margin-top: -20px drin hat, ist es egal, wie groß die Icons sind. So werden sie immer in den Text gezogen

[Bently.]

Danke an euch hab's aber per @Media Querie's geregelt.
#Closed