Hallo zusammen,
nun brauch ich wieder eure Hilfe![Smile :smile: :smile:](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Habe auf meiner Seite zum üben ein Problem mit der Responsiveness.
Alles sieht perfekt aus, solange ich es auf einem Desktop öffne:
![1718628560626.png 1718628560626.png](https://www.html.de/data/attachments/5/5616-f382e1e1012b988627161678db572d32.jpg)
Sobald ich das Fenster verkleiner, wird die Formatierung nicht mehr wie es sein soll:
mittlere Größe:
![1718628648856.png 1718628648856.png](https://www.html.de/data/attachments/5/5617-19478de06eed87b2e372b9c02cbf2e39.jpg)
kleinste Größe(Smartphone)
![1718628701351.png 1718628701351.png](https://www.html.de/data/attachments/5/5618-3e8727af14a3af52b9672cb584fa5b76.jpg)
Hier ist mein Code:
Ich möchte es so haben, dass bei kleinen Displays es untereinander angeordnet ist.
Vielen Dank im Voraus![Smile :smile: :smile:](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Beste Grüße
Monty
nun brauch ich wieder eure Hilfe
Habe auf meiner Seite zum üben ein Problem mit der Responsiveness.
Alles sieht perfekt aus, solange ich es auf einem Desktop öffne:
![1718628560626.png 1718628560626.png](https://www.html.de/data/attachments/5/5616-f382e1e1012b988627161678db572d32.jpg)
Sobald ich das Fenster verkleiner, wird die Formatierung nicht mehr wie es sein soll:
mittlere Größe:
![1718628648856.png 1718628648856.png](https://www.html.de/data/attachments/5/5617-19478de06eed87b2e372b9c02cbf2e39.jpg)
kleinste Größe(Smartphone)
![1718628701351.png 1718628701351.png](https://www.html.de/data/attachments/5/5618-3e8727af14a3af52b9672cb584fa5b76.jpg)
Hier ist mein Code:
HTML:
<div class="grau"
style="padding-top: 20px; padding-left: 150px; padding-right: 150px; padding-bottom: 40px; margin-bottom: 0">
<div class="col" style="float: left">
<div class="row"><h4 style="color: #d75e7d">Ihre Ansprechpartnerin</h4></div>
<div class="row">
<div class="col"><img src="chantal.jpg" alt="Chantal" height="130" width="270"></div>
<div class="col">
<div>
<div style="color: #d75e7d; font-weight: bold">CHANTAL SÉNÉCHAL</div>
<div><a href="mailto:[email protected]" style="color: #7c7c7c">[email protected]</a>
</div>
<div>0228 90822-18</div>
</div>
</div>
</div>
</div>
<div class="col" style="float: right">
<div class="row"><h4 style="color: #d75e7d">So finden Sie uns</h4></div>
<div class="row">
<div class="col"><img src="adresse.jpg" alt="Karte" height="130" width="270"></div>
<div class="col">
<div class="col">
<div style="color: #d75e7d; font-weight: bold">Die Medialen GmbH</div>
<div>Colmantstraße 39</div>
<div><a href="https://www.diemedialen.de/" style="color: #7c7c7c">www.diemedialen.de</a></div>
</div>
</div>
</div>
</div>
</div>
CSS:
.grau {
background-color: #f0f0f0;
min-height: 100%;
width: 100%;
margin-top: 40px;
display: inline-block;
}
Ich möchte es so haben, dass bei kleinen Displays es untereinander angeordnet ist.
Vielen Dank im Voraus
Beste Grüße
Monty