benötige Media-Anweisung

Allgemeine Fragen
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 440
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

benötige Media-Anweisung

Ungelesener Beitrag von struggle »

Hallo, ich benötige eine Media-Anweisung für das Smartphone, ich komme da einfach nicht zurecht.

Es geht um diesen Satz:
standorteanzeigen.PNG
standorteanzeigen.PNG (9.4 KiB) 553 mal betrachtet
zu finden hier:

http://www.online2web.de/stadtplan.html

Ich bitte um Hilfe
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6085
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: benötige Media-Anweisung

Ungelesener Beitrag von Tommy Herrmann »

was willst Du denn tun? Die Schrift kleiner?

So könnte eine Media-Anweisung aussehen, die Du in den Bereich "CSS Editor" des Blocks kopierst:

Code: Alles auswählen

@media (max-width: 767px) {
  .myfont {
    font-size: 1rem;
  }
}
Das heißt dann also (übersetzt) - wenn das Display kleiner/gleich 767px ist, dann wirkt die class="myfont".

Mobirise richtet seine "Breakpoints" (die Punkte an denen andere Display-Größen angesprochen werden) nach "Bootstrap". Gucke mal hier für die Breakpoints:

https://getbootstrap.com/docs/5.0/layout/breakpoints/


1rem = 100% vom Root em = 16px, Du könnetst auch 16px schreiben oder meinetwegen noch kleiner, wie 0.8rem

https://www.w3.org/Style/Examples/007/units.de.html

Schreibe dann diese Class an diese Schrift - also z.B.:

<a class="myfont" href="javascript: void();">&gt;Standorte anzeigen</a>
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 440
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: benötige Media-Anweisung

Ungelesener Beitrag von struggle »

Hervorragend !

Ich nutze ja schon verschiedene Media-Anweisungen auf der Webseite und hatte schon Verschiedenes getestet. Dennoch wußte ich nicht, daß ich hier .myfont nehmen muss.

Alles klar, dankeschön
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 6085
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: benötige Media-Anweisung

Ungelesener Beitrag von Tommy Herrmann »

Moin,

Du musst diese Class ja auch nicht .myfont benennen. Fertige Class-Namen, hinter denen eine Anweisung steht, verwendet Bootstrap, deswegen ist es ein "Framework". CSS hat keine Classnamen, die vorgefertigt wären.

Diesen Class-Namen habe ich mir gestern ausgedacht, der könnte irgendwie heißen, z.B. auch .reinhardKlein

Class-Namen sollten mit Kleinbuchstaben beginnen und nicht mit Zahlen. Sie dürfen keine Umlaute, Sonder- oder Leerzeichen beinhalten.


Eine CSS-Class beginnt mit einem .Punkt, also z.B.:

.meineClass

angesprochen wird eine Class dann im HTML mit:

class="meineClass"


Eine CSS-ID beginnt mit einer #Raute, also z.B.:

#meineID

angesprochen wird eine ID dann im HTML mit:

id="meineID"


Die eigentliche Anweisung für eine Class oder auch eine ID wird dann in {geschweifte Klammern} gesetzt. Mehrere Anweisungen werden mit einem Semikolon getrennt, die letzte Anweisung benötigt daher am Ende kein Semikolon, meist wird es aber so geschrieben, dass auch dort ein Semikolon steht. Das ist also egal:

Code: Alles auswählen

.meineClass {
    font-size: 1rem;
    color: red;
}
Zur besseren Lesbarkeit rückt man dann die einzelnen Anweisungen etwas ein. So kann man z.B. besser erkennen, wo eine Class beginnt und wo diese endet.


Eine Class kannst Du an allen Tags mehrfach auf einer Seite anwenden.

Eine ID kannst Du genauso anwenden, nur darf eine ID auf der gleichen Seite dagegen immer nur einmal vorkommen, eine ID ist also einmalig.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 440
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: benötige Media-Anweisung

Ungelesener Beitrag von struggle »

Hallo Tommy,

vielen Dank für die ausführliche Erklärung, das kann man sich sehr gut merken !
Gruss
Reinhard
Antworten

Wer ist online?

Mitglieder in diesem Forum: Google [Bot] und 2 Gäste