benötige Media-Anweisung

[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 (9.4 KiB) 68 mal betrachtet

zu finden hier:

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

Ich bitte um Hilfe

[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>

[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

[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.

[struggle]

Hallo Tommy,

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