Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann


Mobirise - Text in mobiler Ansicht linksbündig
#1
Oft werden Texte in der mobilen Ansicht zentriert. Welche css-Class muss man verwenden, um Texte auf dem Smartphone linksbündig anzuzeigen? Ich bin mit Bootstrap und Media Queries nicht vertraut, vielleicht habt Ihr eine Idee.

Es geht um diesen Block:

https://mobirise.com/blocks/timelines-mobirise-4.html

Soll auf dem Desktop so bleiben wie es ist aber auf dem Smartphone sieht es zentriert nicht gut aus.
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#2
Du musst gar keine Class einsetzten!

Markiere den Text!
Dann rechtsbündig, dann mittig zentrieren und wiedr linksbündig zentrieren.
Fertig
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#3
Wenn es so einfach wäre :D

Der Text soll nur am Smartphone linksbündig werden. Sonst ist der Text im Beispiel oben in den Kästchen mal rechts mal linksbündig angeordnet, was auch richtig ist.

Anderes Beispiel:

Im Block mit Content und den zwei Trennstriche oben und unten kann man in den Einstellung "linksbündig" einstellen, aber auf dem Smartphone bleibt der Text zentriert.
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#4
(06.03.2018, 12:16)barbara0701 schrieb: Anderes Beispiel:
Zitat:Im Block mit Content und den zwei Trennstriche oben und unten kann man in den Einstellung "linksbündig" einstellen, aber auf dem Smartphone bleibt der Text zentriert.

Den Block nutze ich auch
Ich kann das nach dem Prinzip hin und her, linksbündig einstellen.
Habe ich gerade hier gemacht....schau auf dem Smartphone selbst
http://lavita.agentur28.de/index.php
Kompatibilitätsmöglichkeiten mit Mobi4  |   AMP-Templates Kompatibilität

WIN 10/Alle Browser/AdobePhotoshop/
Mobirise 4/AMP, alle Templates/Kaspersky
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#5
Claus,
es geht um den Timeline-Block, wenn ich das recht verstehe...

Babs, das geht einfach und wie folgt:

Im CSS-Editor des Timeline-Blockes gibt es den BEreich für Smartphones:

@media (max-width: 768px) {
.iconBackground {
left: 0 !important;
}
.separline:before {
left: 0!important;
}
.timeline-text-content {
margin-left: 0 !important;
text-align: left;
}
}

in der class ".timeline-text-content" habe ich nur die Anweisung "text-align: left;" hinzugefügt.

Dann klappt das, dass der Text in der Samrtphone-Ansicht linksbündig dargestellt wird.
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#6
Was hast Du da wieder hingezaubert! Super! Mit CSS3 Menu, Klasse!
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#7
Zitat:@media (max-width: 768px) {
 .iconBackground {
   left: 0 !important;
 }
 .separline:before {
   left: 0!important;
 }
 .timeline-text-content {
   margin-left: 0 !important;
 text-align: left;
 }
}

Das ist es, vielen Dank Doris!  Kussmund  Kussmund  Kussmund
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#8
den hast du doch in deinem Link gezeigt, Babs.

Daher gehe in Mobirise in deinen Timeline-Block und öffne den Editor. Da stehen dann im Bereich des CSS-Editors schon verschiedene Classen drin. Unter anderem die, die ich gepostet habe. Da musst du nur noch den Text-align hinzufügen in der von mir markierten Class.

Ich mache die Tests allerdings im kostenfreien M4 Standardwerk. Aber ich glaube nicht, dass das in den bezahlten Themes anders aussieht... das kann ich aber nicht beurteilen

Ach, deine Vorbemerkung war für CLaus... Smiling
Vergiss meinen letzten Post
lg Doris
_____________________________________________

Ich wünsche mir 3 Dinge:

1. die Kraft, Dinge zu ändern, die ich ändern kann,
2. die Gelassenheit, Dinge hinzunehmen, die ich nicht ändern kann
3. die Weisheit, beides voneinander zu unterscheiden...


.
NOf 2015 ( HTML 5 Dynamic)
Win 10
Grafik und Bildbearbeitung: Corel Suite X8

Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren
#9
Zitat:Ich kann das nach dem Prinzip hin und her, linksbündig einstellen.
Habe ich gerade hier gemacht....schau auf dem Smartphone selbst
http://lavita.agentur28.de/index.php

Ja, es ist der gleiche Block, wird bei mir am Smartphone zentriert, wahrscheinlich weil ich mit den Bootstrap-Grid gespielt habe und der Titel zentriert ist. Das bekomme ich schon hin. Vielen Dank!
Lieben Gruß
Barbara
--------------
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden
Diese Nachricht in einer Antwort zitieren


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Mobirise-Kann man die Timeline Linie ändern Thomas Saake 10 175 19.07.2019, 18:01
Letzter Beitrag: Tommy Herrmann
  Mobirise-Dünner Rahmen um Text Thomas Saake 2 53 18.07.2019, 17:39
Letzter Beitrag: Thomas Saake
  Mobirise-PopUp Builder Thomas Saake 2 87 18.07.2019, 09:31
Letzter Beitrag: Thomas Saake
  Mobirise-Fehlermeldung app.asar Thomas Saake 3 84 16.07.2019, 16:21
Letzter Beitrag: Thomas Saake
  in mobirise eingrückte Auflistung im Text geht das funsport 2 98 16.07.2019, 11:12
Letzter Beitrag: Martin73
  Mobirise-Zeilenabstand Thomas Saake 9 115 16.07.2019, 10:55
Letzter Beitrag: Martin73
  Mobirise-Timeline mit Bildern gesucht Thomas Saake 5 127 16.07.2019, 10:15
Letzter Beitrag: Thomas Saake
  Mobirise-Suchfunktion im Forum Thomas Saake 4 115 09.07.2019, 16:14
Letzter Beitrag: Thomas Saake
  Mobirise-Menüleiste gesucht Thomas Saake 3 106 08.07.2019, 17:38
Letzter Beitrag: Thomas Saake
  Mobirise-Backstretch Full Screen Hintergrund Thomas Saake 5 169 01.07.2019, 15:43
Letzter Beitrag: Thomas Saake



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!