I am very confused with checking responsiveness of a website I am coding through toggling the mobile version in inspect mode. So i have a basic website with nav and hero section etc. When I go to inspect and toggle the mobile version on a small size e.g. 320px it looks like my image is being cut in half even through I have set my max width in 100% in my css. I havent created any media queries yet because when i tried this white space percisted like cutting my content in half. So I assume it should first appearing taking up the whole space available even if that would possibly cause a scroll behavior towards the right and then I should define the further sizes.
My question is: what am I doing initially wrong and it gets half while the navigation appears correclty?
Help would be so much appreciated.
Here is my current code
body {
font-family: 'NeueMachina', sans-serif;
margin: 0;
padding: 0;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
height: -webkit-fill-available;
}
/* Navbar */
.navbar {
position: sticky; /* sticks to top on scroll */
top: 0;
z-index: 1000;
background-color: white;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.navdiv {
margin: 0 auto;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo img {
width: 210px;
height: 45px;
display: block;
}
ul {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 20px;
}
li a {
color: #4d4d4d;
font-size: 16px;
font-weight: bold;
transition: color 0.3s ease;
}
li a:hover {
color: #01A4AB;
}
/* Hero Section */
.hero {
position: relative;
max-width: 100%;
height: auto;
overflow: hidden;
display: flex;
justify-content: flex-start;
align-items: flex-start;
color: white;
padding: 20px;
box-sizing: border-box;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:auto;
object-fit: cover;
z-index: -1;
}
.hero-content {
text-align: left;
padding-top: 400px;
padding-bottom: 50px;
box-sizing: border-box;
z-index: 1;
}
.hero-content h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 20px;
margin-left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SiUSpace</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
/* Enable smooth scrolling */
html {
scroll-behavior: smooth;
}
@font-face {
font-family: 'NeueMachina';
src: url('fonts/PPNeueMachina-InktrapRegular.otf');
}
@font-face {
font-family: 'Lato';
src: url('fonts/Lato-Regular.ttf');
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="navdiv">
<div class="logo">
<a href="#"><img src="img/logo.svg" alt="SiuSpace Logo" /></a>
</div>
<div class="nav-links">
<ul>
<li><a href="#text-section">Das Projekt</a></li>
<li><a href="#projektziele">Projektziele</a></li>
<li><a href="#gefahresszenarien">Gefahresszenarien</a></li>
<li><a href="#fakten">Fakten</a></li>
<li><a href="#aktuelles">Aktuelles</a></li>
</ul>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<img src="img/Coverbild.png" alt="Cover background" class="hero-bg">
<div class="hero-content">
<h1>SICHERER <br>
DROHNENBETRIEB <br>
IM U-SPACE</h1>
</div>
</section>
<!-- Text Section Below Hero -->
<section class="text-section" id="text-section">
<!-- Wrapper for each block -->
<div class="text-block">
<div class="caption">
<h3>AUSGANGSSITUATION</h3>
</div>
<div class="text-content">
<p>Derzeit werden im regulären Drohnenbetrieb nur einige Informationen von kooperativen Drohnen sowie von der Flugsicherung im Bereich der bemannten Luftfahrt gesammelt und verwertet. Gefahren kommen dagegen oft von außerhalb – z. B. von Wetterereignissen, von Vorkommnissen am Boden wie Großbränden oder Menschenansammlungen sowie von Drohnen und anderen Flugobjekten, die nicht kooperativ oder defekt sind. Um solchen Gefahren effizient entgegenzuwirken, muss man sie rechtzeitig erkennen und einschätzen, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
<p>Um solchen Gefahren effizient entgegenzuwirken, müssen sie rechtzeitig erkannt und eingeschätzt werden, um passende Maßnahmen vorzubereiten und bei Bedarf einleiten zu können.</p>
</div>
</div>
<div class="text-block">
<div class="caption">
<h3>DURCHFÜHRUNG</h3>
</div>
<div class="text-content">
<p>Die Aufgabe ist äußerst komplex und hat viele Facetten:</p>
<p>Ein hoher Forschungsbedarf ist erforderlich, um mögliche Gefahren in relevanten Szenarien zu analysieren und situationsgerechte Handlungsstrategien vor und während des Drohnenbetriebs zu erarbeiten.</p>
<p>Eine weitere Herausforderung besteht in der Erschließung der Datenquellen, welche zur frühzeitigen und sicheren Erkennung relevanten Gefahren beitragen können.</p>
<p>Um die Akzeptanz und Effizienz der Drohnentechnologien, sowie ihre Sicherheit zusätzlich zu erhöhen, müssen auch geeignete, an die Stakeholdergruppen angepasste, Kommunikationsmaßnahmen vorbereitet und durchgeführt werden.</p>
</div>
</div>
</section>