Manche Widgets für MOBILE ....

axelemden

VORAB: Reiner Plausch - Austausch - keine Kritik an ZETA oder WIDGETS oder oder https: //www. zella. de/forum/images/smilies/emojione/263a. png" class="smiley" alt=": -)" height="23" width="23" srcset="https: //www. zella. de/forum/images/smilies/emojione/263a@2x. png 2x">Hallo, mir fällt immer mehr auf, dass die feinen Dinge, die ich so versuche, in einem Desktop Bereich unter zu bringen,

im Mobile - Bereich gar nicht mehr zur Geltung kommen. Aus 2 oder 3 Spalten, oder auch mehr, wird ja eh wieder nur eine Spalte reduziert. Infotexte - rechts - werden somit ja aus dem Zusammenhang gerissen. Seht Ihr das auch so? Und ich habe doch einige Probleme, die Abstände zwischen Überschriften h1 (hier über WIDGET) und dem ersten Textblock zu gestalten. Mobile ist dann oft nur die Überschrift, aber der Inhalt muss erst gescrollt werden. Man bekommt ja immer zu hören. . . . . . Abstände zwischen den Textblöcken, Überschriften - Abstand oben/unten beachten (h2) Auf dem Desktop dann natürlich (störend) zu sehen, auf Mobile sogar oftmals übertrieben weit auseinander. Was mache ich da nur falsch?

Es geht um www. fotow. de Besonders Startseite, aber auch die H1-Widget-Überschriften auf Unterseiten.

Vielen Dank für Eure Geduld.

Beste Grüße Axel

axelemden

Beim Anzeigen dieses Inhalts ist ein Fehler aufgetreten. Wenn du ein Benutzer bist, versuche es später erneut. Wenn du ein Administrator bist, überprüfe deine Flarum-Protokolldateien, um weitere Informationen zu erhalten.

mario

Die Frage war nicht so eindeutig um sie deutlich zu beantworten.
zu 1. Bei der Erstellung musst du natürlich immer die Mobile Ansicht im Hinterkopf haben. Dese kannst du ja in ZP immer in der Browservorschau testen.

zu 2. Das kannst du mit etwas CSS an deine Bedürfnisse anpassen. Indem du dem gewünschten Widget zB. die CSS-Klasse: meinabstand hinzu fügst. Und der Seite folgendes CSS hinzufügst;

<style>
.meinabstand {
    margin-top: 30px;
    margin-bottom: 30px;
}
@media (max-width: 990px) {
    .meinabstand {
        margin-top: -20px;
        margin-bottom: -20px;
    }
}
</style>

axelemden

https: //www. zella. de/forum/forum/index. php? thread/465-manche-widgets-f%C3%BCr-mobile/& postID=2808#post2808">

Die Frage war nicht so eindeutig um sie deutlich zu beantworten.

zu1.

Bei der Erstellung musst du natürlich immer die Mobile Ansicht im Hinterkopf haben. Dese kannst du ja in ZP immer in der Browservorschau testen.

zu2.

Das kannst du mit etwas CSS an deine Bedürfnisse anpassen. Indem du dem gewünschten Widget zB. die CSS-Klasse: meinabstand hinzu fügst. Und der Seite folgendes CSS hinzufügst;

< style>
. meinabstand {
margin-top: 30px;
margin-bottom: 30px;
}
@media (max-width: 990px) {
. meinabstand {
margin-top: -20px;
margin-bottom: -20px;
}}
< /style>

axelemden

Vielen Dank ! ! https: //www. zella. de/forum/images/smilies/emojione/263a. png" class="smiley" alt=": -)" height="23" width="23" srcset="https: //www. zella. de/forum/images/smilies/emojione/263a@2x. png 2x"> Überlagert das CSS jetzt auch die Einstellungen, die ich in "Darstellung-Einstellungen" bereits (notdürftig) vorgenommen habe? Ich kann nämlich noch keinen großen Unterschied feststellen. Oder muss "importent" in die CSS rein?

mario

Ich habe das CSS nicht getestet weil ich deine Voraussetzungen nicht kenne.

https: //www. zella. de/forum/forum/index. php? thread/465-manche-widgets-f%C3%BCr-mobile/& postID=2812#post2812">

Was du mit überlagert meinst weiß ich nicht. Aber genau da sollst du ja das CSS einfügen. Wenn du eine CSS-Klasse nutzt die sonst nicht vorkommt hat das keine Auswirkungen auf den Rest der Seite.

https: //www. zella. de/forum/forum/index. php? thread/465-manche-widgets-f%C3%BCr-mobile/& postID=2812#post2812">

Ich kann nämlich noch keinen großen Unterschied feststellen. Oder muss "importent" in die CSS rein?

Zum testen am besten erst mal größere Abstände nutzen. Ob "important" nötig ist hängt immer vom Layout und dem genutzten Widget ab.

Wenn du mir Layout und das verwendete Widget nennst kann ich das heute Abend testen.