Hey,
ich wollte gerade beginnen meine Website auf Mobilgeräte zu optimieren und bin bereits bei der media query nicht weiter gekommen. Verkleinere ich das Fenster meines Laptops funktioniert alles wunderbar, aber wenn ich es auf meinem Handy probiere, wird die normale Desktopversion angezeigt. Kann mir jemand sagen, wo der Fehler liegt. Ich habe schon alles probiert und komme nicht weiter. Die Codeschnipsel im Folgenden (ich hatte es am Ende auf die paar Zeilen heruntergebrochen, um vielleicht so den Fehler zu finden):
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Start</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navigation">
<div class="logo"></div>
<p class="menu">
<a href="index.html" class="aktuell">Home</a>
<a href="#">Blupp</a>
<a href="#">Blibla</a>
<a href="#">Über mich</a>
<a href="#">Impressum</a>
<a href="#">Kontakt</a>
</p>
</div>
<div class="banner">
</div>
</body>
</html>
CSS:
* {
margin:0 auto;
font-family: Avenir Next Condensed, Avenir Next, Helvetia, sans-serif;
color: rgb(55, 57, 55);
text-align:center;
}
a:hover {
color:rgb(149, 131,157);
}
a {
text-decoration:none;
}
.navigation {
height:170px;
width:100%;
background-color:rgb(149, 131,157);
position:fixed;
top:0;
}
.logo {
height:110px;
width:180px;
background: url(index_files/Logo.png) no-repeat;
background-size:contain;
}
.menu {
height:45px;
padding-top:20px;
background-color:rgb(172,158,179);
}
.menu a {
padding-right:40px;
padding-left:40px;
border-left:solid 3px #6E6E6E;
font-weight:500;
}
.aktuell {
color:#BDBDBD;
}
#banner {
background:url(index_files/banner.png) no-repeat;
margin-top:140px;
width:100%;
height:700px;
background-size: cover;
}
@media (max-width:52em) {
.menu {
font-size:1em;
}
.menu a{
padding-right:20px;
padding-left:20px;
}
#kontakt {
margin:8%;
padding-top:0;
}
}
@media (max-width:700px) {
.menu {
background-color:black;}
}
Lieben Dank und Liebe Grüße