Hallo und erst mal herzlich willkommen
Zunächst meinst du vermutlich
Responsive web design. Das Wichtigste daran sind sogenannte media-queries, mit denen du die Gültigkeit bestimmter CSS Regeln von der Bildschirmgröße abhängig machen kannst.
Um deine Frage insgesamt zu beantworten, wäre es hilfreich wenn du skizzieren würdest, wie es am Ende aussehen sollte. Sonst muss ich leider etwas raten, was für dich "angepasst" bedeutet.
Aus Erfahrung würde ich jetzt mal die divs auf dem Desktop nebeneinander anordnen, weil da genug Platz ist, und auf dem Handy untereinander. Das kannst du beispielsweise so erreichen:
HTML:
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36:
| <html> <head> <link rel="stylesheet" type="text/css" href="t.css"> <meta charset="UTF-8"> </head> <body>
<div id="Bild1" class="col"> <img src="ags.png" width="auto" height="100" alt="Bild"> <h2>Überschrift 1</h2> <div id="A1T1"> <p>Text 1</p> </div> </div>
<div id="Bild2" class="col"> <img src="demo.png" width="auto" height="100" alt="Bild"> <h2>Überschrift 2</h2>
<div id="A1T2"> <p>Text 2</p> </div> </div>
<div id="Bild3" class="col"> <img src="ags.png" width="auto" height="100" alt="Bild"> <h2>Überschrift 3</h2> <div id="A1T3"> <p>Text 3</p> </div> </div>
</body> </html> |
CSS Datei:
Cascading Style Sheet
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27:
| div.col { float: left; width: 33.3333%; text-align: center; }
@media (max-width: 800px) { div.col { width: 100%; } }
div.col p { text-align: left; }
#Bild1 { background-color: #ffd; }
#Bild2 { background-color: #fdf; }
#Bild3 { background-color: #dff; } |