Portfolio website not fitting to smaller devices - html

Question

Why is the website not fitting correctly to smaller devices?
There is still a horizontal scroll bar. When entered in design view, mobile devices don't show in terms of what I want. I tried to resize everything but it still doesn't work.
Could it be margin or padding somewhere? Or the project sections too big? Or something to do with media queries?
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
gap: 0px 0px;
grid-template-areas:
"header header header header"
"hero hero hero hero"
"about about about about"
"text text text text"
"project1 project1 project1 project1"
"project2 project2 project2 project2"
"project3 project3 project3 project3"
"project4 project4 project4 project4"
"footer footer footer footer";
}
#media (max-width: 1200px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"hero"
"about"
"text"
"project1"
"project2"
"project3"
"project4"
"footer";
}
}
#media only screen and (max-width: 1200px) {
section.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
}
.navbar {
position: absolute;
display: inline-block;
top: 50px;
right: 60px;
font-family: 'Khula', sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.name {
position: absolute;
display: inline-block;
top: 50px;
left: 60px;
font-family: 'Kanit', sans-serif;
line-height: 30px;
font-weight: 500;
font-size: 28px;
color: #222222;
text-decoration: none;
}
.hero {
grid-area: hero;
padding-top: 90px;
padding-bottom: 250px;
text-align: center;
}
.hero-h1 {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 100px;
color: #bbbbbb;
line-height: 100px;
letter-spacing: -1px;
}
.hero-h1-color {
color: #222222;
}
.container {
max-width: 1240px;
}
.about {
grid-area: about;
background-color: #f5f5f5;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.home-h2-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
padding: 90px 100px 80px;
font-size: 70px;
color: #222222;
line-height: 70px;
}
.home-h3-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
font-size: 35px;
color: #222222;
padding: 90px 100px 80px;
font-weight: 400;
}
.text {
grid-area: text;
height: 500px;
margin-left: 100px;
margin-right: 100px;
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
text-align: center;
font-size: 40px;
color: #bbbbbb;
padding-top: 138px;
line-height: 60px;
}
.text-h3-color {
color: #222222;
}
.project1 {
grid-area: project1;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project2 {
grid-area: project2;
background-color: #f8f7ff;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project3 {
grid-area: project3;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project4 {
grid-area: project4;
background-color: #eff5fd;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
}
.footer-contact {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
}
<div class="grid-container">
<header class="header">
<div>Web Developer</div>
<nav class="navbar">
About
Projects
Contact
</nav>
</header>
<div class="hero">
<h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>
</div>
<section class="content-container about">
<h2 class="home-h2-text">Nice to <br />meet you</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<div class="content-container text">
<h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
</div>
<section class="content-container project1">
<h2 class="home-h2-text">Project 1</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project2">
<h2 class="home-h2-text">Project 2</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project3">
<h2 class="home-h2-text">Project 3</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project4">
<h2 class="home-h2-text">Project 4</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<footer class="content-container footer">
<div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
</div>

Answer 1

You can nest your code in a flex container which is what I did. For the example, I called it main-wrapper. I then added some flex-box styles to that class and applied overflow: hidden; to make it so it doesn't scroll. Then I added some sample media queries to align your nav components when resizing. They are marked at the bottom of your CSS labeled /* additions */ Feel free to change around as you desire, but this should get you on the right track.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 110px auto 1fr 470px auto auto auto auto auto;
gap: 0px 0px;
grid-template-areas:
"header header header header"
"hero hero hero hero"
"about about about about"
"text text text text"
"project1 project1 project1 project1"
"project2 project2 project2 project2"
"project3 project3 project3 project3"
"project4 project4 project4 project4"
"footer footer footer footer";
justify-items: center;
}
#media (max-width: 1200px) {
.grid-container {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"header"
"hero"
"about"
"text"
"project1"
"project2"
"project3"
"project4"
"footer";
}
}
#media only screen and (max-width: 1200px) {
section.content-container {
margin-left: 10px;
margin-right: 10px;
width: 90vw;
}
}
#media only screen and (max-width: 1200px) {
footer.content-container {
margin-left: 10px;
margin-right: 10px;
}
}
.header {
grid-area: header;
}
.navbar {
position: absolute;
display: inline-block;
top: 50px;
right: 60px;
font-family: 'Khula', sans-serif;
line-height: 38px;
font-weight: 400;
font-size: 16px;
}
.nav-link {
margin: 18px;
color: #222222;
text-decoration: none;
}
.name {
position: absolute;
display: inline-block;
top: 50px;
left: 60px;
font-family: 'Kanit', sans-serif;
line-height: 30px;
font-weight: 500;
font-size: 28px;
color: #222222;
text-decoration: none;
}
.hero {
grid-area: hero;
padding-top: 90px;
padding-bottom: 250px;
text-align: center;
}
.hero-h1 {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 100px;
color: #bbbbbb;
line-height: 100px;
letter-spacing: -1px;
}
.hero-h1-color {
color: #222222;
}
.container {
max-width: 1240px;
}
.about {
grid-area: about;
background-color: #f5f5f5;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
width: 80vw;
}
.home-h2-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
padding: 90px 100px 80px;
font-size: 70px;
color: #222222;
line-height: 70px;
}
.home-h3-text {
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
font-size: 35px;
color: #222222;
padding: 90px 100px 80px;
font-weight: 400;
}
.text {
grid-area: text;
height: 500px;
margin-left: 100px;
margin-right: 100px;
font-family: 'Khula', sans-serif;
letter-spacing: -1px;
text-align: center;
font-size: 40px;
color: #bbbbbb;
padding-top: 138px;
line-height: 60px;
}
.text-h3-color {
color: #222222;
}
.project1 {
grid-area: project1;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project2 {
grid-area: project2;
background-color: #f8f7ff;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project3 {
grid-area: project3;
background-color: #fdf0f2;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.project4 {
grid-area: project4;
background-color: #eff5fd;
height: 700px;
margin-left: 100px;
margin-right: 100px;
margin-top: 38px;
}
.footer {
grid-area: footer;
margin-top: 38px;
margin-left: 100px;
margin-right: 100px;
height: 700px;
margin-bottom: 100px;
}
.footer-text {
padding: 200px 100px;
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 80px;
color: #bbbbbb;
line-height: 80px;
letter-spacing: -1px;
}
.footer-contact {
font-family: 'Khula', sans-serif;
font-weight: 600;
font-size: 35px;
color: #222222;
line-height: 50px;
letter-spacing: -1px;
text-decoration: none;
padding-top: 0px;
margin-left: 60px;
margin-right: 60px;
}
.footer-text-color {
color: #222222;
}
ul {
list-style-type: none;
text-decoration: none;
}
/* additions */
.main-wrapper {
display: flex;
justify-content: center;
overflow-x: hidden;
max-width: 100%;
height: 100%;
}
#media only screen and (max-width: 650px) {
.logo > .name {
position: absolute;
top: 10px;
left: 35%;
}
.logo {
width: 100%;
}
.navbar {
position: relative;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
right: 0;
}
.content-container .about {
width: 100vw;
}
body {
margin: 0;
}
h2 {
white-space: nowrap;
}
.footer-text {
align-items: center;
}
}
.content-container {
width: 80vw;
}
.footer-text {
display: flex;
justify-content: center;
flex-direction: column;
}
<div class="main-wrapper">
<div class="grid-container">
<header class="header">
<div class="logo">Web Developer</div>
<nav class="navbar">
About
Projects
Contact
</nav>
</header>
<div class="hero">
<h1 class="hero-h1">ABC <br /><span class="hero-h1-color">front end developer</span></h1>
</div>
<section class="content-container about">
<h2 class="home-h2-text">Nice to <br />meet you</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<div class="content-container text">
<h3>ABCDEFG <br /><span class="text-h3-color">ABCDEFG.</span></h3>
</div>
<section class="content-container project1">
<h2 class="home-h2-text">Project 1</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project2">
<h2 class="home-h2-text">Project 2</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project3">
<h2 class="home-h2-text">Project 3</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<section class="content-container project4">
<h2 class="home-h2-text">Project 4</h2>
<h3 class="home-h3-text">About Me</h3>
</section>
<footer class="content-container footer">
<div class="footer-text">Let's <br> <span class="footer-text-color">Connect</span></div>
<ul>
<li>Email</li>
<li>LinkedIn</li>
<li>GitHub</li>
</ul>
</footer>
</div>
</div>
EDIT: prevent horizontal scroll w/ initial scroll. I kept the main-wrapper div I added on to add the styles too. You can use max-width: 100%; and overflow-x: hidden; to avoid horizontal scroll.
EDIT 2 set width: 80vw; on about to get the same width as before.