Hello everyone im trying to create an html page with a header, main, footer layout. Every element is inside a flexbox column container. The problem is that when im viewing the page with mobile toolbar on chrome set to an iphone 14 pro max the page looks like the photo bellow:
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Symposium Radio</title>
</head>
<body>
<div class="flex-container">
<header class="header">
<nav class="navbar">
<div class="header-logo">
<img src="Symposium Radio LOGO White.png" alt="Logo">
</div>
<div class="navbar-links">
<ul>
<li><a href="#">Αρχική</a></li>
<li><a href="#">Σχετικά</a></li>
<li><a href="#">Η ομάδα μας</a></li>
<!-- <li><a href="#">Πρόγραμμα</a></li>
<li><a href="#">Επικοινωνία</a></li> -->
</ul>
</div>
</nav>
</header>
<main class="main">Main</main>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
My css:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
* {
box-sizing: border-box;
}
html {
font-size: 12pt;
font-family: "Noto Sans", sans-serif;
}
body {
margin: 0;
padding: 0;
background-color: #8a1313;
}
img {
height: 140px;
width: 140px;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
position: sticky;
top: 0;
width: 100%;
background-color: white;
padding: 10px 30px;
z-index: 1000;
}
.navbar {
display: flex;
justify-content: center;
align-items: center;
}
.navbar-links ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
text-decoration: none;
padding: 0 30px;
display: block;
color: black;
font-size: 20px;
cursor: pointer;
transition: 0.3s;
}
.navbar-links li a:hover {
color: #8a1313;
text-decoration: underline;
text-underline-offset: 7px;
}
.main {
flex-grow: 1;
}
How can i fix this issue?