Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:

Hi, When I change the size of the browser sometimes the scroll function on my preview page stops working. Am I doing something wrong in my code or is this a browser issue?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <title>My Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
      <nav id="navbar" class="nav">
        <ul class="nav-list">
          <li><a href="#welcome-section">About</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="#contact">Contact</a></li>
          </ul>
        </nav>
        
      <section id = "welcome-section" class="welcome-section">
        <h1>Hi! I'm Mika</h1>
        <p class="sub-title">A web developer</p>
        </section>

      <section id="projects" class="projects">
  <h2 class="project-section-title">These are some of my projects</h2>
  <div class="project-grid"> 
    <a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-tile"></a>
    <div class="project-tile"></div>
    <div class="project-tile"></div>
    <div class="project-tile"></div>
    <div class="project-tile"></div>
  </div>
</section>
      </body>
      </html>

/* file: styles.css */
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: 'Anton', sans-serif;
}

html{
  font-size: 62.5%;
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
  color: inherit;
}

ul{
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  min-height: 100%;

}
#navbar{
  position: fixed;
  top: 0%;
  right: 0%;
  display: flex;
  justify-content: right;
  font-size: 2rem;
  height: 50px;
  background-color: #fbc6d0;
}

li {
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
  color: #ee0979;
}

.welcome-section{
  width: 100%;
  min-height: 40vh;
  background-color: #fbc6d0;
  padding: 100px;
  justify-items: center;
  align-items: center;

}

h1,h2{
  font-size: 4rem;
  background: linear-gradient(to right, #ff6a00, #ee0979); /* Gradient colors */
  -webkit-background-clip: text; /* Clips the background to the text */
  -webkit-text-fill-color: transparent; /* Makes text transparent */;
  
}

.sub-title{
  font-family: 'Anton', sans-serif;
  font-size: 2rem;
  color: #ee0979; 
}

.project-section-title{
  display: block;
  margin-left: 10px;
  text-align: center;
  font-size: 3rem;
}

.projects{
  background-color: #c2d1e5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.project-tile{
  width: 500px;
  height: 300px;
  margin: 10px;
background-color:#ee0979; 
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Hey,
can you elaborate a little please? What do you mean by scroll function stops working? And does it happen in larger screen sizes or smaller?

Hi!
It seems to happen whenever I change the preview screen either way. To make it bigger or smaller. The scroll option goes away, the screen gets stuck and then I need to edit the code to get it to work again.

You mean the scroll bar fades away when you resize the screen?
If that’s the case, then I think it’s a browser issue because it works fine for me.
Have you tried changing your browser?

Yes, it disappears and also I can’t scroll up and down with the touch pad.
I have not tried another browser! But it’s good to know it works fine for you!
Thank you for checking.

No problem!
You can still try it on different browsers to make sure it’s working. If it still doesn’t work then we’ll look for ways to solve the issue.
Happy coding!

Yes! I will check it out.
Also as an aside. The ‘save code’ function doesn’t seem to work. So I need to save my code on a word doc and then refill it as and when needed on the browser. I wonder if these problems are related.

The save button not working might also be a browser issue. We will figure it out once you check your code on different browsers.
Usually, the save button should work fine, when you click it you receive a popup saying your code is saved.
Do you write your code in Word? Do you use editors like VS Studio code?