ABAKUS

Verfasst: **01.08.2017, 13:33**

Hallo Forum (ich hoffe, dass ist der richtige Bereich für diese Frage.)

Ich möchte zwei verlinkte Bilder nebeneinander darstellen lassen und habe dabei die Lösung von 2 Div-Containern gewählt, welche mit width=50% nebeneinander stehen. Sieht gut aus, aber nur auf Desktop.

Auf Mobile überlappen die beiden Fenster. Was kann ich tun, damit das aufhört?

Code: Alles auswählen

Was halten Sie von diesen?
<div style="width&#58; 50%; float&#58; left; text-align&#58; center;"><a href="http&#58;//www.seite.xx/link/up1"><img class="aligncenter wp-image-9015" src="http&#58;//www.seite.xx/wp-content/uploads/2017/01/Umfragen-bearbeiten.jpg" alt="4 € bei Anmeldung geschenkt" width="333" height="179" /></a><strong><a href="http&#58;//www.seite.xx/link/up1">Geld für Umfragen
4 € bei Anmeldung geschenkt</a></strong></div>
<div style="width&#58; 50%; float&#58; left; text-align&#58; center;"><a href="http&#58;//www.seite.xx/link/up2"><img class="aligncenter wp-image-9017 size-medium" src="http&#58;//www.seite.xx/wp-content/uploads/2017/01/kostenloser-Reisefuehrer-Reisen.jpg" width="340" height="179" /></a><strong><a href="http&#58;//www.seite.xx/link/up2">Gratis Reiseführer für Deutschland</a></strong></div>
&nbsp;

Das ist der Code, den ich benutzt habe. Was kann ich ändern, damit sich die beiden Fenster in der mobilen Version untereinander anordnen, anstatt zu überlappen.

Danke im voraus.

Verfasst: **01.08.2017, 14:42**

z.B. über max-device-width

Gruß
Danie

Verfasst: **01.08.2017, 14:47**

Das verstehe ich nicht recht. meinst du indem ich "width: 50%" durch "max-device-width: 50%" ersetze?

Verfasst: **01.08.2017, 15:05**

Du solltest dein Style mal in eine eigene CSS Datei auslagern.

Im <head> gibts du folgende Zeile an: <meta name="viewport" content="width=device-width, initial-scale=1.0">

In der CSS kannst du dann via @media screen die <div> Container für die unterschiedlichen Medien anordnen, gestalten, usw.

Google nach folgenden Begriffen:

meta viewport
flexible boxes
responsive design

usw.

Verfasst: **01.08.2017, 15:08**

Bitte lies dich in responsive design ein, und lerne wie man CSS schreibt und eigene klassen deklariert, statt da mit "style" angaben was zusammenzustuempern. Wenn dein theme schon responsive ist (bootstrap?), dann brauchst du nur noch die richtigen css-classen zu setzen.
Ansonten musst du natuerlich erstmal mit media-queries erklaeren welche groessen du als desktop und welche als mobile definierst.

und ich wuedre grundsaetzlich "max-width", und nicht "max-device-width" benutzen. Das erste bezieht sich auf den aktuellen viewport des browsers, das letztere auf die gesammte monitorbreite!

ABAKUS

Das lästige html mal wieder - Problem mit Div-Containern

Das lästige html mal wieder - Problem mit Div-Containern