Entwickler-Ecke
Sonstiges (Web-Entwicklung) - Responsitive Design
Csharp-programmierer - Di 07.02.17 23:44
Titel: Responsitive Design
Hallo Leute,
ich habe auf einer Website 3 DIVs nebeneinander. Auf meinem 27 Zoller wird alles richtig angezeigt. Wenn ich aber die Website kleiner mache, werden alle in einer anderen Höhe dargestellt. Ich habe es schon mit height="...px" probiert, es haut zwar hin, aber wenn ich jetzt mit dem Handy die Website aufrufe, dann wird alles komplett anders dargestellt. Hier einmal der Code:
HTML-Dokument
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
| <div id="element-ce7c1faa-e82b-4754-a869-bd5a3b53906e" data-platform-element-id="694046499467037623-1.2.6" class="platform-element-contents" >
<div class="callout-box-wrapper">
<div class="callout-box--standard item">
<div class="element-content">
<div style="width: auto;><div></div><div><div class="wsite-image wsite-image-border-none " style="padding-top:10px;padding-bottom:10px;margin-left:0;margin-right:0;text-align:center">
<a>
<img src="uploads/8/3/1/2/83128648/x2.png" alt="Bild" style="width:auto;max-width:100%" />
</a>
<div style="display:block;font-size:90%"></div>
</div></div>
<div class="wsite-spacer" style="height:10px;"></div>
<div class="paragraph" style="text-align:center;"><font size="5">Freundlicher Support</font></div>
<div class="paragraph" style="text-align:center;"><span><font size="4">Egal was Ihr Anliegen ist, unser Support wird sich jederzeit um Ihre Supportanfrage kümmern. Und das vollkommen kostenlos.</font></span></div></div>
</div>
</div>
</div>
</div> |
Wie kann ich es machen, dass die Höhe auf allen Monitoren gleich aussieht?
Moderiert von 
Narses: Beiträge zusammengefasstBzw ich habe ein Formular mit padding-left: 10%. Wenn die Website auf dem Handy geöffnet wird, soll das padding-left aber nur 1% haben. Wie kann ich das machen?
jfheins - Mi 08.02.17 23:33
Ohne Stylesheet kann ich da wenig nachvollziehen. Ich habe mal ein Minimaldokument erzeugt und
Cascading Style Sheet
1:
2:
3:
| div {
border: 1px solid red;
} |
eingefügt. Und da sind ne Menge divs :lupe: Alle untereinander oder ineinander.
Für responsive design habe ich gerne bootstrap genutzt - kann ich empfehlen. Das ist eine irre umfangreiche Bibliothek, die ein Grid-System mitbringt:
http://getbootstrap.com/css/#grid
Du kannst die Spalten so definieren, dass die bei einer bestimmten Schwelle automatisch umbrechen und untereinander angezeigt werden. Es gibt drei Schwellwerte, die du auch selbst anpassen kannst.
Csharp-programmierer - Fr 10.02.17 11:39
Vielen Dank. Ich werde mir das mal genauer ansehen.
Jetzt hapert es nur noch an einer Sache: ich habe das padding-left eines Formulars auf 10% gestellt. Wenn man mit dem Handy auf dieses Formular zugreift, soll das padding-left aber nur 1% betragen. Wie kann ich das einstellen?
hydemarie - Fr 10.02.17 12:10
Nein, nimm bitte nicht Bootstrap. Einfach ein gigantisches Framework auf ein Problem zu werfen, dessen Funktionsweise man nicht versteht, war noch nie eine verantwortungsvolle Lösung. "Grids" (Flexbox) kann CSS schon selbst.
Tipp: Lies dich mal zu Browser-Viewports (ist ein Einzeiler im HTML-Header) und Mediaquerys ein. Bootstrap macht auch nicht viel mehr, nur mit wesentlich mehr überflüssigem Code.
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!
