Positionierung Schrift im Spezial-Button

Allgemeine Fragen
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag von stobi_de »

Sorry, ich meine das Ding einen Block tiefer, was dann lila wird beim Hovern
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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.
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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.....
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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 ...
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag von Tommy Herrmann »

Vielleicht hilft ja ein

max-width: 100%;


bei den Kindern - oder ein:

overflow: hidden;
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag von stobi_de »

Querscroller:
das gleiche Element www.afripix.de/steuerberater
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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;
}
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Positionierung Schrift im Spezial-Button

Ungelesener Beitrag 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!
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot], Majestic-12 [Bot] und 30 Gäste