nicht angemeldet
Hallo,
nachdem ich bisher mit Anleitungen und Beispielen sehr weit gekommen bin mit meinem Webprojekt, stehe ich momentan vor einem Problem das ich nicht ganz erfassen kann. Ich habe die Webseite als eine responsive Webseite entwickelt, stehe nun jedoch vor dem Problem dass das Ganze auf dem Handy trotzdem ähnlich wie auf dem Desktop dargestellt wird. Während der Entwicklung habe ich hauptsächlich auf die Tools im Firefox zurückgegriffen und dort die Bildschirmgröße verkleinert, was auch alles ohne Probleme so geklappt hat wie ich es mir vorgestellt habe. Mir ist natürlich klar dass es einen Unterschied macht, was Firefox mir für eine Smartphoneauflösung anzeigt und was das Smartphone selbst anzeigt, aber ich habe nicht erwartet dass es überhaupt nicht funktioniert.
Also zuerst einmal ein Link zu der Seite, an der ich bastle.
Das Problem ist nun, dass die Media Queries auf den (getesteten) Mobilgeräten nicht greifen und das Layout dasselbe wie auf dem Desktop ist. Ich habe mehrere Brüche bei 890px, 600px und 475px eingeführt, aber bis auf die Schriftgröße ändert sich nichts auf den Mobilgeräten im Vergleich zum Desktop.
Hier zwei Ausschnitte aus dem HTML- und CSS-Code, der komplette Code passt hier nicht rein, kann aber über den obigen Link angezeigt werden:
<head>
<title>Websitetitel</title>
<meta charset="UTF-8" />
<meta name="language" content="de" />
<meta name="viewpoint" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Dieser Text wird bei dem Suchergebnis angezeigt und auf 250 Zeichen gekürzt" />
<meta name="keywords" content="Stichwörter, die, bevorzugt, angezeigt, werden" />
<meta name="revisit-after" content="7 days" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<meta name="page-topic" content="Dienstleistungen" />
<meta name="geo.region" content="DE-NW" />
<meta name="geo.placename" content="Königswinter" />
<meta name="geo.position" content="50.7;7.2" />
<meta name="ICBM" content="50.7, 7.2" />
<link rel="stylesheet" href="style.css" type="text/css" media="all">
<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon">
</head>
/*=============================================================
========================Mobile================================*/
@media all and (max-width: 890px)
{
header
{
width: auto;
}
#logo
{
text-align:center;
min-width: 476px;
max-width: 565px;
}
#imgcoral
{
margin: 0;
}
#slogan
{
top: 30px;
right: 43px;
font-size: 0.95em;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
#deco
{
display: block;
box-shadow: 0px 0px 5px #888;
}
#toggle
{
display: block;
position: sticky;
top: 6px;
margin: -63px 0 0 6px;
z-index: 10;
cursor: pointer;
}
#menu
{
position: fixed;
top: 0px;
height: 100%;
padding: 0.75em;
text-align: left;
z-index: 10;
}
nav ul
{
height: auto;
padding: 0.75em 0.75em 0.125em 0.75em;
}
nav ul li
{
display: block;
margin-bottom: 0.625em;
}
nav ul li a
{
display: block;
padding: 0 0.75em;
}
#line
{
display: none;
}
#checkbox:not(:checked) + .wrap nav
{
left: -14.75em;
transition: .3s;
}
#checkbox:not(:checked) + .wrap #toggle
{
left: 0.375em;
transition: .3s;
}
#checkbox:not(:checked) + .wrap #main
{
padding-left: 0;
transition: .3s;
}
#checkbox:not(:checked) + .wrap header
{
margin-left: 0;
transition: .3s;
}
#checkbox:not(:checked) + .wrap footer
{
margin-left: 0;
transition: .3s
}
#checkbox:checked + .wrap nav
{
left: 0;
transition: .6s;
}
#checkbox:checked + .wrap #toggle
{
margin-left: 15.125em;
transition: .6s;
}
#checkbox:checked + .wrap #main
{
padding-left: 14.75em;
transition: .6s;
}
#checkbox:checked + .wrap header
{
margin-left: 14.75em;
transition: .6s;
}
#checkbox:checked + .wrap footer
{
margin-left: 14.75em;
transition: .6s
}
#main
{
width: 35.3125em;
}
article
{
width: 90.6%;
margin: 0 auto 1.25em auto;
padding: 4.7%;
}
aside
{
display: block;
width: 100%;
margin: 0 auto;
}
aside section
{
width: 90.6%;
padding: 4.7%;
}
footer ul
{
max-width: 35.3125em;
margin: 0 auto;
}
#footerwrap
{
padding: 0.75em 1.25em;
}
}
@media all and (max-width: 600px)
{
#main
{
width: 100%;
margin: 0 auto 5.5em auto;
}
#main article
{
width: 94%;
margin: 1.25em 0 0 0;
padding: 3%;
}
#main aside section
{
width: auto;
margin: 1.25em;
padding: 1.25em;
}
}
@media all and (max-width: 475px)
{
#logo
{
margin-top: -15px;
min-width: 261px;
}
#imgburrel
{
display: block;
margin: -90px auto 0 auto;
}
#slogan
{
top: 240px;
left: 0;
right: 0;
margin: 0 auto;
}
td
{
display: block;
width: 100%;
padding: 1em 0;
}
}
Ich habe schon etliche Versuche durchgeführt und intensive Googlerecherche betrieben, aber nichts hat geholfen. Vermutlich ist es nur ein Detail, warum das ganze nicht greift, aber ich bin im Moment echt aufgeschmissen...
Ich hoffe dass Ihr mir hier weiterhelfen könnt, ich danke schon vielmals im Voraus!
Herzliche Grüße
PS: es sind einige Details eingebaut, so zum Beispiel dass Mobile Menu, das rein auf CSS basiert etc., also nicht wundern :)
Gunnar Bittersmann
oxo888oxo
Tabellenkalk