MichaelS: Die Media-Queries bringen mich zum Heulen...

Beitrag lesen

Hallo an Euch Alle! Wie schon geschrieben, bin ich erst seit Kurzem wieder daheim und habe die Website sofort wieder auf den "Schreibtisch" zurück bekommen, mit dem freundlichen Hinweis: Die Mobilansicht geht gar nicht ( stimmt!!!!!) und muss /sofort!/ neu gestaltet werden, weil wir ansonsten am 01.03. bei Google aus dem Ranking fallen und ich bin schuld daran. Zudem sei auf einem 10" Pad die Schrift so klein, dass einige Gemeindeglieder diese nicht lesen können, das 3-fache drop- down- Menü nervt und der ausdruckbare Gemeindebote im PDF- Format fehlt. Also habe ich mich seit Freitag mal ran gemacht und das Menü verändert und den Gemeindeboten eingebunden. Die Änderungen habe ich noch nicht auf den Server geladen- sind aber fertig! Dann wollte ich - mal eben schnell- die Mobilansicht ändern! Denkste...

Was habe ich vor: Ich möchte 3 verschiedene Viewportgrößen ansprechen. 1. bis 600px; 2. von 600px bis 1370px und 3. von 1370px bis - open end.

Um keine ellenlange und damit unübersichtliche .css- Datei zu bekommen, habe ich zuerst im HTML-Text ( zur Probe nur in der index.htm) drei .css Dateien eingebunden.

**HTML**
<head>
     ...
		<link rel="stylesheet"  href="css/index_mobile.css">  
		<link rel="stylesheet"   href="css/index_medium.css">
		<link rel="stylesheet"   href="css/index.css">
		`<meta name="viewport" content="width=device-width, initial-scale=1.0">  `
	</head>

**CSS**     mit je einer Angabe:
@media (max-width: 600px) {
@media (min-width: 600px) and (max-width: 1370px)  {
@media (min-width: 1370px)  {

Ergebnis: Nur die index.css wird eingelesen und über alle Größen hinweg angezeigt.

Könnt Ihr erkennen, wo mein Denkfehler liegt? In diesem Moment überlege ich gerade, ob ich nicht den Term:

<meta name="viewport" content="width=device-width, initial-scale=1.0">  

vor die .css- Aufrufe platzieren müßte. Das probiere ich gleich mal aus. Ansonsten hoffe ich auf ein paar freundliche Ideen von Euch.

Wenn alle Stränge reißen- dann mach ich "kurzen Prozess" und schreibe a) den Inhaltstext um (mit Grid - oder Flexmodell) oder b),ich schreibe eine "mobile-Version" als 2. Homepage und setze einfach einen Link: " hier gehts zur mobilen Version" auf die index.htm . Das Ganze dann auf einen anderen Server- und fertig bin ich... . Das ist saudoof- und ist ja nur doppelte Pflegearbeit- ich weiß... und evtl. wäre das Google-Ranking dann auch nicht mehr das, was es mal war. Ich sitze bereits gut 24 Stunden daran- und bin keinen einzigen Schritt weiter gekommen.

Liebe Grüße von (einem frustrierten) Michael ( und dabei soll ich mich doch nicht aufregen...🤔 )

P.s.: 1370px ist genau der Wert, wo der 2-spaltige Hauptinhalt der index.htm auf eine Spalte ( unschön) umgebrochen wird.