Experiencing issues with element distances on different screen sizes? While the website looks fine on normal screens, there's a noticeable gap between the header and main sections on mobile devices. See below for the provided HTML and CSS code.
<head>
<title><?php echo title; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=0.1">
<link rel="favicon icon" type="image/x-icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/fa.js"></script>
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
</head>
<body>
<!-- Header -->
<div class="header">
<nav class="navbar">
<div class="container">
<ul class="nav list-group list-group-horizontal">
...
</div>
</nav>
</div>
<div class="container main">
<div class="row">
<div class="col-9">
<div id="slides" class="carousel slide" data-ride="carousel">
...
</div>
</div>
html, body {
height: 100%;
width: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: black;
color: #705641;
}
.header {
background: linear-gradient(
to bottom,
rgb(92, 72, 72) 0%,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 90%,
rgba(0, 0, 0, 1) 100%), url(../img/bg-top.jpg) center top no-repeat;
height: 100%;
min-width: 1300px;
}
Normal View:
https://i.sstatic.net/q0Ysh.jpg
Mobile View: