Hi,
I have started to do my first webpage with a header, main and footer section. In the main section I would like the content to be centered both vertically and horizontally. But when I make the window smaller som of the content is moving under the header and can’t be seen. Why? See the picture there I can´t see the first line.
<!DOCTYPE html>
<html>
<head>
<title>My first website</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Alice">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
</head>
<body>
<header>
<ul class="topnav">
<li><a href="index.html">Home</a></li>
<li><a href="1.html">1</a></li>
<li><a href="2.html">2</a></li>
<li><a href="3.html">3</a></li>
<li><a href="4.html">4</a></li>
</ul>
</header>
<main>
<div id="vertical">
<section id="index">
<h1>First line<br/> </h1>
<h1>Second line</h1>
</section>
</div>
</main>
<footer>
Don't forget the dance moves.
</footer>
</body>
</html>
html, body {
margin: 0;
height: 100%;
width: 100%
min-height: 100%;
min-width: 100%;
}
body {
display: flex;
flex-direction: column;
}
header {
width: 100%;
height: 3em;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
font-family: 'Alice';
font-size: 1.1em;
z-index: 10;
}
main {
display: flex;
flex: auto;
z-index: 5;
height: auto;
background-image: url("../body_background.jpg");
background-color: #eee;
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
overflow-y: auto;
-webkit-overflow-scrolling: touch;
justify-content: center;
text-align: center;
}
#vertical {
display: flex;
align-items: center;
}
footer {
width: 100%;
height: 3em;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
font-family: 'Alice';
font-size: 1.1em;
z-index: 10;
}
/* Index */
#index h1 {
background-color: #eee;
font-family: 'Alice';
font-size: 4em;
padding: 0em 0.2em;
}
