Seite 1 von 1

Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 07:22
von stobi_de
https://www.afripix.de/hno-bonn/

Ich stehe da gerade mal wieder auf der Leitung.
Diese Seite hier soll bis Wochenende fertig sein, daher hier kein dolles Design sondern nur Stober-Standard.
Die Buttons mit dem runden Dingsbums:
Wie bekomme ich die Schrift immer gut in die vert. Mitte positioniert?
Ich mache das gerade mit vielen Mediaqueries, position: absolute und top:??Px - das kann es doch nicht sein!
Ach die Schriftgröße weigert sich komplett, sich zu ändern!
mit font-size: 1rem!important- tut sich nix.

Also irgendwo gründlicher Denkfehler drin!

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:01
von Tommy Herrmann
Moin,

ich weiß gerade nicht welche Buttons Du meinst - ich sehe gar keine Buttons.

... oder meinst Du diesen Hintergrund-Kreis - hinter der Schrift?

Welches Thema ist das denn?


Background-Kreis.jpg


Dieser Keis ist die class="viereck-nini" und steht in keinem Zusammenhang mit der Schrift. Den könnte man mir "margin" positionieren.

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:16
von stobi_de
Sorry, ich meine das Ding einen Block tiefer, was dann lila wird beim Hovern

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:17
von Tommy Herrmann
... den kleinen Punkt in den Kacheln?

Was nicht schön ist, dieses fixierte Bild mit den Kindern erzeugt einen Querscroller (Overflow) am mobilen Gerät:

Fixiertes Bild erzeugt Overflow.jpg

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:23
von Tommy Herrmann
Also das ist ja das <H2> Tag. Ich habe mal das <br> davor entfernt und dann ein padding-top von 30px eingetragen - jetzt nur mal im linken Bild "Schnarchen":


H2-Tag padding.jpg


Da sich die Größe vom Kreis und auch die Schriftgröße vom <H2> nicht ändern, sollte das doch gehen.

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:38
von stobi_de
Die Schriftgröße wird ja durch das mbr-theme-style="display-7" festgelegt - aber das funzt irgendwie nicht.

Und wo kommt der damische Scroller mit dem Kinder-Kopfhörer-Bild her?
Das Element nutze ich doch ständig...

Heute nicht mein Tag - die Schwiegermutter stirbt.....

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:48
von Tommy Herrmann
In diesem Fall ist das "display-5" für dieses <H2> Tag. Die Schriftgröße hat doch damit auch nicht zu tun - nur die Position dieser Schrift - und diese Position kannst Du doch entweder mit einer eigenen Class oder über das <H2> Tag steuern.

Ich habe jetzt bei den Kindern noch nicht geguckt - weiß nicht, ob ich das finden kann .

Wo hast Du das denn noch - wahrscheinlich hast Du dann da auch diesen Scroller ...

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 08:54
von Tommy Herrmann
Vielleicht hilft ja ein

max-width: 100%;


bei den Kindern - oder ein:

overflow: hidden;

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 10:14
von stobi_de
Querscroller:
das gleiche Element www.afripix.de/steuerberater

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 11:46
von Tommy Herrmann
ja - jetzt ist es auch auf der anderen Seite in Ordnung :tu:

... und der Text über den Kreisen auch :)

war es das:

Code: Alles auswählen

.viereck-mini-text {
  position: absolute;
  top: 30px;
  left: 10px;
  transition: all 0.5s;
}

Re: Positionierung Schrift im Spezial-Button

Verfasst: Do 23. Mär 2023, 13:27
von stobi_de
Ich hatte im mini-wrapper eine Weite von 100%, aber dann irgendwo ein Padding von 10px.
Es scheint so, dass sich die Breite von 100% nicht immer auf das Parent-Element bezieht.
Ich schau gleich nochmal genauer rein, bin gerade aufm Sprung!