Support » Allgemeine Fragen » Bilderdarstellung Mobil

  • Hallo,
    seit wenigen Wochen habe ich nun meine erste Website (mit Twenty Seventeen) und probiere einiges aus. Aktuell habe ich meine ersten Bilder eingearbeitet, sowohl auf Seiten als auch in Beiträgen. Leider sieht das ganze auf dem Desktop zwar gut aus, sobald ich mir das aber auf dem Handy ansehe, verschiebt es die Bilder in den Text, teilweise ist dieser sogar verdeckt. Ich habe es zum Einen probiert, die Bilder direkt in den Texteditor einzufügen, als auch mit dem Page Builder von SiteOrigin. Jedes Mal sieht es in der mobilen Version nicht sehr schön aus. Wie kann ich die Darstellung optimieren?
    Vielen Dank für die Hilfe,
    Julia

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Probier mal den code im Zusätzlichen CSS

    .entry-content img {
    	padding:10px;
    	display:block;
    }
    Thread-Starter tschueli

    (@tschueli)

    Vielen Dank! Das sieht schon mal um einiges besser aus.
    Ich hab das Ganze noch etwas ergänzt und bin jetzt einigermaßen zufrieden. Auf meinem Android sieht es so aus wie ich es mir vorgestellt habe. Nur wenn ich das Handy quer drehe, verschiebt es die Formatierung nach wie vor, und auf dem iphone ist die Darstellung ebenfalls noch nicht optimal. Kann ich an dem Code noch etwas machen, um das Problem zu beheben?

    @media(max-width:768px) {
    	.entry-content img {
    	padding:10px;
    	display:block;
    	float: right
    }
    
    }
    • Diese Antwort wurde geändert vor 5 Jahren, 5 Monaten von tschueli.
    • Diese Antwort wurde geändert vor 5 Jahren, 5 Monaten von tschueli.

    Wenn du die CSS-Regel um eine Media Query erweiterst, mit der die Gültigkeit auf Bildschirme mit einer maximalen Darstellungsbreite von 768px begrenzt wird, sieht es „wenn ich das Handy quer drehe“ eben anders aus.

    Eine gute Einführung in CSS findest du z.B. beim Mozilla Developer Network.

Ansicht von 3 Antworten - 1 bis 3 (von insgesamt 3)
  • Das Thema „Bilderdarstellung Mobil“ ist für neue Antworten geschlossen.