In Mobilansicht Text nicht neben Bild anzeigen

Robota

Hallo, ich nutze das Theme "MH Elegance": https://www.mhthemes.com/themes/mh/elegance/
Auf dieser Internetseite: https://bit.ly/2I3WxLF
Die Texte und Bilder auf der Startseite habe ich mit

HTML

[one_third]text[/one_third][one_third]text[/one_third][one_third_last]text[/one_third_last]

in drei Spalten unterteilt.

In den Spalten kommt der Text unter den Bildern.
Wenn ich dann aber die Browsergröße verschiebe bzw. die Seite von einem Handy anschaue, dann steht der Text rechts neben dem Bild gequetscht.
Auf manchen Handys sieht das nicht sehr schön aus.

Gibt es eine Möglichkeit zu verhindern, dass der Text rechts neben dem Bild angezeigt wird?
So dass ein Zeilenumbruch also sozusagen erzwungen wird?

Im "Text" habe ich schon

HTML

<br />

eingefügt, leider löst das aber das Problem nicht, der Text wird weiter rechts neben dem Bild angezeigt.

LG Tim

Werbepost

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

SirEctor

display:block mit width: 100% für das Elternelement des Bildes und ein margin:auto für das Bild in Verbindung mit media-query, also bis zu einer bestimmten Breite.

Robota

Hallo, danke für deine Antwort.
Leider sind das für mich bömische Dörfer, trotzdem versuche ich, das abzuarbeiten und zu verstehen.
Ich habe zu display: block diese Seite und ein Youtube-Video gefunden:
https://www.webmaster-crashkurs.de/css-erklaerung-zu-display.htm

Externer Inhalt www.youtube.com

Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.

Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.

Außerdem habe ich danach gesucht, wie ich CSS direkt mit in das HTML einfüge:
https://www.html-seminar.de/stylesheets_in_html_einbinden.htm

Dies ist der Text-Teil der Seite:

HTML

[one_third]
<h4 style="text-align: center;"><a href="https://www.xyz.tld/Seite/"><img class="alignleft wp-image-455 size-full" src="https://www.xyz.tld/wp-content/uploads/2018/03/Bild.jpg" alt="" width="307" height="195" /></a><span style="color: #000000;">Überschrift</span></h4>
<p style="text-align: center;">Text</p>
<a href="https://www.xyz.tld/produkte/"><img class="size-full wp-image-461 aligncenter" src="https://www.xyz.tld/wp-content/uploads/2018/03/weiterlesen_button.png" alt="" width="110" height="46" /></a>[/one_third]


[one_third]
<h4 style="text-align: center;"><a href="https://www.xyz.tld/lil/"><img class="alignleft size-full wp-image-456" src="https://www.xyz.tld/wp-content/uploads/2018/03/lil.jpg" alt="" width="307" height="195" /></a>Überschrift</h4>
<p style="text-align: center;">Text
<span style="color: #ffffff;">.</span>
<span style="color: #ffffff;">.</span></p>
<a href="https://www.xyz.tld/foc/"><img class="size-full wp-image-461 aligncenter" src="https://www.xyz.tld/wp-content/uploads/2018/03/weiterlesen_button.png" alt="" width="110" height="46" /></a>


[/one_third]


[one_third_last]
<h4 style="text-align: center;"><a href="https://www.xyz.tld/mik/"><img class="alignleft size-full wp-image-458" src="https://www.xyz.tld/wp-content/uploads/2018/03/mik.jpg" alt="" width="307" height="195" /></a>Überschrift</h4>
<p style="text-align: center;">Text
<span style="color: #ffffff;">.</span>
<span style="color: #ffffff;"> .</span>
<span style="color: #ffffff;"> .</span></p>
<a href="https://www.xyz.tld/mik/"><img class="size-full wp-image-461 aligncenter" src="https://www.xyz.tld/wp-content/uploads/2018/03/weiterlesen_button.png" alt="" width="110" height="46" /></a>[/one_third_last]

Alles anzeigen

Ich habe nun in der ersten Zeile hinter

HTML

[one_third]

dies rein geschrieben:

HTML

<one_third display: block; width: 100%</one_third>

Nachdem ich dann aber auf "Visuell" umgeschaltet habe um das Ergebnis zu sehen, war dieser Code wieder verschwunden.
Gibt es eine andere Methode in eine Wordpress-Seite CSS einzufügen?
Sorry, wenn ich mich etwas blöd anstelle, aber ich versuche mein Bestes.

Edit maxe: URLs aus Code auf Wunsch entfernt

SirEctor

Zitat von Robota

Gibt es eine andere Methode in eine Wordpress-Seite CSS einzufügen?

Ja gibt es. Schau dir den Quelltext im Frontend an und schau welche Klassen die "Spalten" bekommen. Damit kannst du dann diese über Design - Customizer - Zusätzliches CSS nach deinen Wünschen stylen.

Das könnte dann so aussehen:

Code

@media screen and (max-width: 600px){
.one_third h4 a{
    width:100%;
    display: block;
}
.one_third h4 a img{
    margin:auto;
    float:none;
}
.one_third h4 a:after{
    content:"";
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}
.one_third h4 a img{
   margin: auto;
   float: none;
}
}

Alles anzeigen

Robota

Vielen Dank für deine Hilfe!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

In Mobilansicht Text nicht neben Bild anzeigen

Jetzt mitmachen!