Meine Website wird auf dem Desktop einwandfrei angezeigt, auf dem mobilen Bildschirm jedoch nicht
Ich gestalte meine persönliche Website mit HTML/CSS. Der Text lässt sich jedoch nicht auf das Telefon skalieren. Bitte beachten Sie das Bild unten.
Websites sehen auf dem Desktop gut aus, werden aber auf Mobilgeräten nicht gut angezeigt.
Mobile Anzeige
Meine Google Drive-Einbettung passt nicht einmal auf den Bildschirm meines Telefons. Mobiltelefonanzeige GGD PDF eingebettet
Was soll ich tun, um dieses Problem zu lösen? Vielen Dank.
Hier ist mein Code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>EXAMPLE</title>
<meta charset="UTF-8"
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Hoa Dang">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/projects.css">
<link rel="stylesheet" href="css/nav.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="shortcut icon" type="image/x-icon" href="EXAMPLE"/>
<link rel="manifest" href="manifest.json">
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
</style>
</head>
<body>
<nav>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul id="nav-ul">
<li class="nav-li">
<a class="nav-link selected">HOME</a>
</li>
<li class="nav-li">
<a class="nav-link">ABOUT</a>
</li>
<li class="nav-li">
<a class="nav-link">CV</a>
</li>
<li class="nav-li">
<a class="nav-link">PROJECTS</a>
</li>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</nav>
<div id="HOME">
<div class="center">
<h1 id="main-header">EXAMPLE</h1>
<h3 id="sub-header">example.com <span class="green-detail">&</span> example.com</h3>
</div>
</div>
<div id="CV">
<div class="center">
<iframe src="example.com" width="640" height="480" allow="autoplay"></iframe>
</div>
</div>
<div id="PROJECTS" class="center">
<div id="img-container"></div>
</div>
<div id="ABOUT">
<div class="center">
<h2 id="about-header">example.comE<span class="green-detail">:</span></h2>
<p id="about-text">
<br> Text
<br> <br>
</p>
</div>
</div>
<footer>
<ul id="sm-ul">
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-instagram"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-facebook"></i>
</a>
</li>
<li class="sm-li">
<a class="sm-logo" href="example.com" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
</ul>
</footer>
</body>
</html>
CSS
* { padding: 0; margin: 0; }
:root {
--base-color: #d2dae2;
--secondary-color: #0be811;
}
body {
background-color: #1e272e;
font-family: 'DM Sans', sans-serif;
color: var(--base-color);
overflow: scroll;
}
body::before{
content: '';
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url("example.com");
background-size: cover;
background-position: top-center;
opacity: 0.2;
filter: blur(7px);
}
nav, footer, #about-text, #contact-container {
width: 100%;
}
nav {
margin-top: -30px;
position: fixed;
top: 0;
text-align: right;
z-index: 2;
}
footer {
position: fixed;
bottom: 0;
padding: 5vh;
}
#about-text, #sub-header {
font-size: 2.3vh;
line-height: 1.6;
font-weight:400;
}
#main-header, #sub-header {
text-align: center;
}
#main-header {
font-size: 8.5vh;
}
#nav-ul {
padding-right: 5vh;
}
#sm-ul, #nav-ul {
list-style-type: none;
}
#about-header {
font-size: 4vh;
font-weight: bold;
}
.center, #contact-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
.sm-logo {
color: var(--base-color);
font-size: 3vh;
transition: 0.2s ease-in;
}
.sm-logo:hover, .nav-link:hover, .nav-link.selected, .green-detail {
color: var(--secondary-color);
}
.sm-li {
display: inline-block;
margin-left: 5vh;
}
.nav-link {
font-size: 1.8vh;
cursor: pointer;
text-decoration: none;
transition: 0.2s ease-in;
}
.nav-li {
display: inline-block;
margin: 5vh 5vh 0 0;
}
@media screen and (max-width: 650px) {
nav, footer, #nav-top, #nav-ul, .nav-link {
padding: 0;
margin: 0;
}
#sm-ul, #nav-ul {
text-align: center;
}
.sm-li {
margin: 0 2vh 5vh 2vh;
}
.nav-li {
margin: 5vh 2vh 0 2vh;
}
}