I have a problem with CSS-Grids because they are overlapping and I don't know why. My HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<div class="main-grid">
<div class="landing-page-container">
<div class="header-container">
<img src="../assets/logo.png" class="header-logo">
</div>
<img src="../assets/box.png" class="box-1">
</div>
<div class="angebot-container">
<div class="section-header-container">
<h1>Angebot</h1>
</div>
</div>
</div>
</body>
</html>
and my CSS is:
@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT&display=swap');
body{
margin: 0;
background-image: url("../assets/backgroundlanding.png");
background-attachment: fixed;
}
.main-grid{
display: grid;
grid-template-columns: 100vw;
grid-template-rows: 100vh 100vh;
}
.landing-page-container{
width: 100vw;
grid-row-start: 1;
grid-row-end: 2;
display: grid;
grid-template-columns: auto 620px auto;
grid-template-rows: 90px auto auto auto 1px;
grid-gap: 10px;
position: relative;
}
.header-container{
grid-row-start: 1;
grid-row-end: 2;
grid-column-start: 1;
grid-column-end: 4;
background-color: white;
box-shadow: 0px 0px 5px black;
}
.box-1{
width: 620px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
box-shadow: 1px 1px 8px black;
border-radius: 5px;
}
.angebot-container{
grid-row-start: 2;
grid-row-end: 3;
display: grid;
grid-template-rows: 150px;
position: relative;
}
.section-header-container{
grid-row-start: 1;
grid-row-end: 2;
box-shadow: 0px 0px 5px black;
background-color: white;
}
.section-header-container h1{
font-family: 'Old Standard TT', serif;
font-weight: 400;
font-size: 40px;
color: #7B0605;
position: relative;
border-bottom: 2px solid #7B0605;
left: 50px;
width: calc(100vw - 50px);
}
So there are two sections in the main-grid and inside these, there are different grids. The two sections in the main-grid have to be 100vh high. When I now resize the window, the two main-grid rows overlap. How do I prevent them from doing this?
Aucun commentaire:
Enregistrer un commentaire