Leomai
Neues Mitglied
Halli hallo ich arbeite gerade an der mobilen Version einer website, problem ich bekomm das mit dem meta viweport nicht hin, sodass die Seite immer richtig angezeigt wird
der quell
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
der quellcode:
<title>Unbenanntes Dokument</title>
<link href="thaistyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header></header>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menü</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Über uns</a>
<a href="#">Massagen</a>
<a href="#">Preise</a>
<a href="#">Gutscheine</a>
<a href="#">Konatakt</a>
<a href="#">Impressum</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div id="adresse"></div>
<section></section>
<footer></footer>
</div>
</body>
</html>
mein css
@charset "utf-8";
header{
width: 320px;
height:100px;
background-color: brown;
flex-wrap: wrap;
}
#wrapper{background-color: #AA9820;
width:320px;
}
.dropbtn {
background-color: #B7A52D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #AA9820;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #B7A52D;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
section{
width: 320px;
height:1200px;
background-color: #076338}
footer{
width:320px;
}
könnt ihr mir helfen?
der quell
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
der quellcode:
<title>Unbenanntes Dokument</title>
<link href="thaistyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header></header>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menü</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Über uns</a>
<a href="#">Massagen</a>
<a href="#">Preise</a>
<a href="#">Gutscheine</a>
<a href="#">Konatakt</a>
<a href="#">Impressum</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div id="adresse"></div>
<section></section>
<footer></footer>
</div>
</body>
</html>
mein css
@charset "utf-8";
header{
width: 320px;
height:100px;
background-color: brown;
flex-wrap: wrap;
}
#wrapper{background-color: #AA9820;
width:320px;
}
.dropbtn {
background-color: #B7A52D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #AA9820;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #B7A52D;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.show {display:block;}
section{
width: 320px;
height:1200px;
background-color: #076338}
footer{
width:320px;
}
könnt ihr mir helfen?