Portfolio website not fitting to smaller devices-CodePudding

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 >

    <header >
      <div><a href=index.html >Web Developer</a></div>
      <nav >
        <a href=about.html >About</a>
        <a href=projects.html >Projects</a>
        <a href=contact.html >Contact</a>
      </nav>
    </header>




    <div >

      <h1 >ABC <br /><span >front end developer</span></h1>




    </div>
    <section >

      <h2 >Nice to <br />meet you</h2>

      <h3 >About Me</h3>


    </section>

    <div >
      <h3>ABCDEFG <br /><span >ABCDEFG.</span></h3>
    </div>

    <section >

      <h2 >Project 1</h2>

      <h3 >About Me</h3>

    </section>
    <section >


      <h2 >Project 2</h2>

      <h3 >About Me</h3>

    </section>
    <section >

      <h2 >Project 3</h2>

      <h3 >About Me</h3>


    </section>
    <section >


      <h2 >Project 4</h2>

      <h3 >About Me</h3>

    </section>
    <footer >

      <div >Let's <br> <span >Connect</span></div>

      <ul>

        <li><a href=about.html >Email</a></li>
        <li><a href=projects.html >LinkedIn</a></li>
        <li><a href=contact.html >GitHub</a></li>
      </ul>



    </footer>
  </div>

CodePudding user response：

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 >
<div >

    <header >
      <div ><a href=index.html >Web Developer</a></div>
      <nav >
        <a href=about.html >About</a>
        <a href=projects.html >Projects</a>
        <a href=contact.html >Contact</a>
      </nav>
    </header>




    <div >

      <h1 >ABC <br /><span >front end developer</span></h1>




    </div>
    <section >

      <h2 >Nice to <br />meet you</h2>

      <h3 >About Me</h3>


    </section>

    <div >
      <h3>ABCDEFG <br /><span >ABCDEFG.</span></h3>
    </div>

    <section >

      <h2 >Project 1</h2>

      <h3 >About Me</h3>

    </section>
    <section >


      <h2 >Project 2</h2>

      <h3 >About Me</h3>

    </section>
    <section >

      <h2 >Project 3</h2>

      <h3 >About Me</h3>


    </section>
    <section >


      <h2 >Project 4</h2>

      <h3 >About Me</h3>

    </section>
    <footer >

      <div >Let's <br> <span >Connect</span></div>

      <ul>

        <li><a href=about.html >Email</a></li>
        <li><a href=projects.html >LinkedIn</a></li>
        <li><a href=contact.html >GitHub</a></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.