My website displays fine on desktop but not on mobile screen
I design my personal website using HTML/CSS. But the text doesn't scale to the phone. Please refer to the picture below.
The website looks great on desktop, but doesn't display well on mobile devices.
Mobile display
My Google Drive embed doesn't even fit on the phone screen. Mobile phone display GGD PDF embed
What should I do to solve this problem? Thank you so much.
Here is my 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;
}
}