Responsives Design - Abstände / Ränder von Buttons 
Author: Tim B.
Visited 67,
Followers 0,
Shared 0
Hallo zusammen,
ich versuche meine Website momentan auf dem Desktop als auch mobil zu optimieren. Leider habe ich ein Problem mit den Buttons in der mobilen Ansicht. Für eine optimierte Desktop-Ansicht muss ich die Buttons in eine bestimmte Richtung ausrichten und auch den Buttons Ränder geben, damit ein ordentlicher Abstand besteht.
Das führt nun allerdings in der mobilen Ansicht dazu, dass die Buttons nach links oder nach rechts verschoben werden in der mobile Ansicht, anstatt dass sie schön zentriert sind. Gibt es eine Möglichkeit, separate Einstellungen in der mobile Ansicht für Objekte vorzunehmen, sodass die mobile Ansicht ordentlich aussieht.
Hier zwei Beispiele von dem Problem:
Beste Grüße
Tim
Posted on the
Ein Möglichkeit wäre das Text-Objekt.
Hier mit "Stil" eine Hintergrundfarbe vergeben, mit "Ränder" den Text in der Höhe mittig ausrichtet und beim Text-Objekt den Text verlinken, zentrieren und individuelle Linkfarbe festlegen.
Siehe auch die Screenshots unten und meine Testseite
>> https://findelinks.de/123shop-hosteurope/button-farbe-mouseover.html
Alternativen:
A) Die andere Nutzer wissen wie sowas mit dem Button-Objekt möglich ist.
B) KolAsim (Moderator) kann einen EXTRA-Code für das Button-Objekt anbieten.
-----
-----
Da ich kein Handy habe, kann ich es nur mit der Handy-Simulation in Firefox testen.
Handy-Simulation quer, siehe Screenshot oben, und hier noch die Handy-Simulation hochkant.
-----
Es wird wahrscheinlich Randeinstellungen schuld sein der diesen Abstand macht. Es kommt darauf an wie dein Raster aufgebaut ist und welche Randeinstellungen du hast. In der Handyansicht müssten eigentlich alle Aussenrandeinstellungen deaktiviert sein und alle Buttons gleich. Egal ob es das Button-Objekt ist oder das Text-(Artikel)Objekt!
In welcher "Ansicht" sind die obigen Screenshots?
Die"obigen Screenshots" sind mit der Handy-Simulation in Firefox gemacht worden, siehe unten
Und da die Testseite verlinkt ist, kann jeder selber Tests machen.
-----
2 Lösungen für das Objekt "Button":
1) Beim Button-Objekt mit unterschiedlichen horizontalen Rändern die unterschiedlichen Textlängen ausgleichen, siehe dazu meine 2 Screenshots unten
2) Vielleicht können CSS-Experten einen CSS-Code bereitstellen, damit alle Buttons gleich breit werden, ohne dass man unterschiedliche Werte beim horizontalen Rand ermitteln und eingeben muss.
.
----- 3 x Objekt "Button" mit unterschiedlichen horizontalen Rändern auf der Testseite -----
----- Einstellungen beim Objekt "Button" Nr. 1 für die Testseite -----