HI kann mir einer bitte sagen, warum das Design zerissen ist? im Emulator von Chrome (wenn ich es mit Handyversionen anschaue) passt die Seite, wenn ich sie mit dem normalen Browser anschaue, wird die Seite zerissen warum?
Hab beim letzten Div die spalte2reihe3 ausgeblendet, dann passt zum. die linke Spalte, sobald ich aber die spalte2reihe3 wieder einblende zereisst es die Seite.
Bilder im Anhang.
http://www.benwillgruber.com/stefanseite/test/index.php --> damit man es vl. besser versteht was ich meine
HTML
<!DOCTYPE html>
<html lang = "de">
<head>
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset = "utf-8">
<link rel = "stylesheet" href = "./css/style.css">
</head>
<body>
<div id = 'reihe1'>
<div id = 'spalte1reihe1'>
</div>
<div id = 'spalte2reihe1'>
</div>
<div id = 'spalte3reihe1'>
</div>
</div>
<div id = 'reihe2'>
<div id = 'spalte1reihe2'>
</div>
<div id = 'spalte2reihe2'>
</div>
<div id = 'spalte3reihe2'>
</div>
</div>
<div id = 'reihe3'>
<div id = 'spalte1reihe3'>
</div>
<div id = 'spalte2reihe3'>
</div>
<div id = 'spalte3reihe3'>
</div>
</div>
<div id = 'reihe4'>
<div id = 'spalte1reihe4'>
</div>
<div id = 'spalte2reihe4'>
</div>
<div id = 'spalte3reihe4'>
</div>
</div>
</body>
</html>CSS:
Code
* { box-sizing: border-box;}
body {
background-color: #3C3C3B; /* Dunkel Grau */
padding: 0px;
margin: 0px;
}
/* Willkommenseite */
#spalte1reihe1 {
width: 25vw;
height: 25vh;
float: left;
background-color: #ECECEC; /* Grau */
}
#spalte2reihe1 {
width: 50vw;
height: 25vh;
float: left;
background-color: #ffffff;
}
#spalte3reihe1 {
width: 25vw;
float: left;
height: 25vh;
background-color: #ECECEC; /* Grau */
}
#spalte1reihe2 {
width: 25vw;
height: 19vh;
float: left;
background-color: #2DAB66; /* Grün */
}
#spalte2reihe2 {
width: 50vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grau */
}
#spalte3reihe2 {
width: 25vw;
float: left;
height: 19vh;
background-color: #2DAB66; /* Grün */
}
#spalte1reihe3 {
width: 25vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grün */
}
#spalte2reihe3 {
width: 50vw;
height: 19vh;
float: left;
background-color: #ffffff; /* Grün */
}
#spalte3reihe3 {
width: 25vw;
height: 19vh;
float: left;
background-color: #ECECEC; /* Grün */
}
#spalte1reihe4 {
width: 25vw;
height: 25vh;
float: left;
background-color: #ECECEC; /* Grau */
}
#spalte2reihe4 {
width: 50vw;
height: 25vh;
float: left;
background-color: #ffffff;
}
#spalte3reihe4 {
width: 25vw;
float: left;
height: 25vh;
background-color: #ECECEC; /* Grau */
}