Man könnte das natürlich mal mit einem einfachen Textblock, aus der Gruppe "Article", probieren, der eben nur eine Spalte hat.
Das ist dann aber etwas fummelig, weil man ja die Abstände ausprobieren muss.
Hier mein temporäreres Beispiel:
gelöscht-mobirise-tutorials.com/Vorlageseite/
(Seite wird später wieder gelöscht)
Ansicht Desktop:
Ansicht am Handy:
Der Code für das Bild, das ich noch ein wenig höher gemacht habe, damit es sich besser neben dem Text positioniert:
Code: Alles auswählen
<img src="https://www.example.com/logofeld.png" alt="Logo" title="Logo">
Hier habe ich diese CSS im "CSS Editor" vom Block angewendet:
Code: Alles auswählen
img {
float: left;
width: 96px;
}
.mypadding-text {
padding-left: 300px;
}
@media (max-width: 767px) {
.mypadding-text {
padding-left: 130px;
}
}
Dem <img> Tag habe ich also die Originalbreite von 96px gegeben und ein "float: left", damit bricht das Bild nach links um und steht somit neben dem Text.
Dann braucht man etwas Abstand vom Bild zum Text, dieser Abstand rechnet nun aber nicht ab dem Bild, sondern ab dem linken Blockrand, hier im Beispiel 300px vom linken Blockrand. Diese
class="mypadding-text" habe ich dann an das <h4> Tag der Überschrift und an <p> Tag vom Text mit hinzugeschrieben (rot markiert im Screenshot unten).
Für das Handy dann noch die Media-Abfrage und dort dann nur noch 130px, damit der Text nicht zu weit rechts steht.
So sieht das dann im Block aus:
