When I add new code the item leaves the screen

Question

I'm currently working on my portfolio and every time I try to add new code/items to my section, the current item gets pushed to the top and out of the viewport. I'm not sure what's causing this in my code. I'm using JSX, and I feel like the problem is with my app.js and app.css, which dictate the entire React application. This is my current CSS:

html{
  font-size: 62.5%;
}

body{
  height: 300vh;
  overflow: auto;

  background: #136a8a;   /*fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #267871,
    #136a8a
    );  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #267871,
    #136a8a
      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  color: black
}

.pages{
  position: absolute;
  left: 40%;
  top: 40%;
  transform: translate(-40%, -40%);
  font-size: 5rem;
}

/* .scroll{
  padding: 12px;
  height: 2000px;
} */



 @media only screen and (max-width:1322px){
  .pages{
    font-size: 3.5rem;
    padding-top: 1px;
  }
 }
@media only screen and (max-width:900px){
  .pages{
    font-size: 2.7rem;
  }
} 
@media only screen and (max-width:700px){
  .pages{
    font-size: 2rem;
  }
} 
@media only screen and (max-width:500px){
  .pages{
    font-size: 1.5rem;
  }
} 
@media only screen and (max-width:400px){
  .pages{
    font-size: 1.2rem;
  }
} 
@media only screen and (max-width:280px){
  .pages{
    font-size: 1.1rem;
  }
}

I thought it might be a problem of not being high enough, but no matter how high I put it it doesn't work. It could also be a problem with positioning, but I tried to adjust the positioning of the top more, but it would affect a lot of things, I have adjusted most of the code based on this positioning, please help. Thanks!

Answer 1

1. You mentioned that you tried adjusting the positioning, but that caused problems, however, it may be necessary to re-evaluate the positioning of elements to ensure they don't overlap or get pushed out, so you may need to adjust the positioning of existing items top or margin-top value to prevent them from being pushed up

The

2. body element uses height: 300vh;, which means that the height of the body is always 3 times the height of the viewport. If the content exceeds this height, it may Problems can arise, consider using relative units (such as percentages) to set the height, or letting the content determine the height rather than using a fixed value.

3. You set overflow: auto; on the body element, which may cause scroll bars to appear when the content does not fit in the viewport, if you want the content to be scrolling, then no problem, but if you want the new content to fit without scrolling, you may need to adjust the layout or content structure.