Text soll Bild umfliesen. Mein Theme macht aber das...

  • Hallo!

    Wie kann ich erreichen dass ein Bild linksbündig ist und der Text entsprechend umfliest und nach "Bildende" soll der Text wieder linksbündig sein. Also so:
    [Blockierte Grafik: https://s17.directupload.net/images/190621/temp/uzrqu3a2.jpg]

    Mein Theme macht das aber so:
    [Blockierte Grafik: https://s17.directupload.net/images/190621/temp/bmj8exzp.jpg]

    In der Desktopansicht kann ich damit leben, aber in der mobilen Ansicht ist dann zu wenig Platz für den Text.

    Webseite: badewanne-dusche.de
    Theme: Catch Responsive

    Vielen Dank für die Hilfe

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Das ist in deinem Fall relativ schwierig. Das Theme ist so gebaut, dass das Bild (derzeit) eine senkrechte Spalte von 30% zur Verfügung hat, der Text dann 70% auch in einer senkrechten Spalte. Mit diesen Ausgangsfakten ist das Umfließen relativ schwer möglich. Es gibt folgende Lösungsmöglichkeiten:

    1) Es gibt eine Einstellungsmöglichkeit im Theme, die genau deinem Wunsch entspricht. Das weiß ich aber nicht.
    2) Das Theme umbauen (Ist auch nicht soooo schwer)
    3) Das Bild am Smartphone auf 100% Breite stellen und oberhalb des Textes platzieren.

    Da das von dir beschriebene Problem nur am Smartphone auftritt und das die einfachste Lösung ist, würde ich dir das empfehlen. Ich kann dir die Codezeile dafür hier reinstellen. Das ist schnell gemacht.

  • Vielen Dank für Deine Antwort

    1.) Gibt es leider nicht
    2.) Theme umbauen...? Ich denke dafür fehlt mir das Wissen
    3.) Daher würde ich gerne auf das Angebot, also den Code, zurückkommen.

    Danke :-)

  • CSS
    @media all and(max-width: 600px)
    {
    .excerpt-image-left .has-post-thumbnail .archive-post-wrap .featured-image,
    .excerpt-image-right .has-post-thumbnail .archive-post-wrap .featured-image,
    .excerpt-image-left .has-post-thumbnail .archive-post-wrap .entry-container,
    .excerpt-image-right .has-post-thumbnail .archive-post-wrap .entry-container
            {width: 100% !important; }
            }

    probier das mal. Ist ungeprüft, sollte aber bei einer Breite unter 600px funktionieren.

  • Vielen Dank. Hat nicht ganz funktioniert, durch rumprobieren hat es mit folgendem Code funktioniert.
    Vielen Dank!!

    CSS
    @media screen and (max-width: 61.5625em)
    {
    .excerpt-image-left .has-post-thumbnail .archive-post-wrap .featured-image,
    .excerpt-image-right .has-post-thumbnail .archive-post-wrap .featured-image,
    .excerpt-image-left .has-post-thumbnail .archive-post-wrap .entry-container,
    .excerpt-image-right .has-post-thumbnail .archive-post-wrap .entry-container
            {width: 100% !important; }
            }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!