Kevin Powell - Community•3d ago

Content going upwards and out of viewport when adding new things below

When i add new content below ,the existing upper content goes out of the viewport from the top. I am not suing absolute positioning , using flex-column in the main container

  return (

    <div className="Container">
      <div className="back">
        <img src={bg_image} alt="" className="background-image" />
      </div>
      .
      .
      .
More content below , more divs i mean
    </div>

  return (

    <div className="Container">
      <div className="back">
        <img src={bg_image} alt="" className="background-image" />
      </div>
      .
      .
      .
More content below , more divs i mean
    </div>

body, html {
  margin: 0; 
  padding: 0; 
  height: 100%;
  overflow-x: hidden;
}

.Container {
  max-width: 100%;
  margin: 0 auto; 
  display: flex;
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: center;
  background-color: #ffffff; 
  min-height:100svh;
  padding-top: 0;
}

.back {
  position: relative;
  width: 100%; 
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}

.background-image:hover {
  transform: scale(1.02);
}

.
.
.
.
.
More css

body, html {
  margin: 0; 
  padding: 0; 
  height: 100%;
  overflow-x: hidden;
}

.Container {
  max-width: 100%;
  margin: 0 auto; 
  display: flex;
  flex-direction: column; 
  justify-content: flex-start; 
  align-items: center;
  background-color: #ffffff; 
  min-height:100svh;
  padding-top: 0;
}

.back {
  position: relative;
  width: 100%; 
  height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease;
}

.background-image:hover {
  transform: scale(1.02);
}

.
.
.
.
.
More css

30 Replies

clevermissfox•3d ago

Your image is using position absolute.

Faisu0pOP•3d ago

yeah but changing it to relative or removing it completeing does not make a diff its still getting out of view i have been trying ot fix this since morning .. : (

clevermissfox•3d ago

Was just pointing that out because your post said you weren’t using absolute. Please put your code into a https://codepen.io or equivalent if you need assistance.

CodePen

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

Faisu0pOP•3d ago

sure ill put it in pen ummm, y styles r not apply in the pen

Faisu0pOP•3d ago

https://codepen.io/Faisu0p/pen/JjgqMaz

Faisu0p

CodePen

Untitled

...

Faisu0pOP•3d ago

btw m using react thats y its not working here

Jochem•3d ago

you can't just dump react code into codepen, and 'classname' isn't how you apply classes to elements in html at least

Faisu0pOP•3d ago

m using react

Jochem•3d ago

you can copy paste the rendered-out html from the dev tools, or use a different site that can host react directly I think there's ways to do react on codepen too, but I'm not familiar with react at all, so you'll have to figure that out yourself

Faisu0pOP•3d ago

ok i ll try something adding react a diff task ....have to add all libraries and stuff lol

clevermissfox•3d ago

You can load react library in the settings on your page. Or use https://scrimba.com with the correct react version as a dependency

What will you build?

The next step of your coding journey starts here.

clevermissfox•3d ago

You can use babel and add npm packages that are appropriate for your project. Or if you have the output of the code you can copy and paste the compiled html.

Faisu0pOP•3d ago

thats too much to do : ( m not a pro i fixed it by adding padding 1100px in the main container but i dont think it is a good option to do

Jochem•3d ago

it's very likely you can just open the dev tools, rightclick the body, and then click copy inner html

Jochem•3d ago

Faisu0pOP•3d ago

Jochem•3d ago

then copy the outer html and remove the body tag

Faisu0pOP•3d ago

message.txt

Faisu0pOP•3d ago

is this okay ?

Jochem•3d ago

the reason we ask folks to include things in codepen or something similar, is that dev problems are quite often impossible to solve without seeing the issue in your own browser. The way to get help, is to make it as easy as possible for the people helping to see the issue live in their browser. They are, after all, offering up their own time just to solve your problem and help you out. If you just want to dump all the code in txt files in the chat, that's entirely fine and entirely up to you, but the help you get will be slower, less focused on the actual issue, and less likely to actually be helpful. The more effort you put into asking the question, the more likely it is you'll get help. When you say "that's too much to do", you're basically saying "I want this solved, but I'm not willing to put in any effort, so y'all plebs that are trying to help should go to the effort instead" You can use codepen, codesandbox, the site clevermissfox suggested, deploy on vercel or do a thousand other things to get the code in people's browsers in a way that demonstrates the problem.

Faisu0pOP•3d ago

i am sorry , i will try to keep it short and clear will figure out something to make it run in code pen or somethign eles

Doksuri•3d ago

i use https://jsfiddle.net/ to test tiny codes 😉

JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

Simon•3d ago

Isolating the problematic html and css in a coding snippet can even help you solve it by yourself. If you can't recreate the issue it's perhaps caused by something else 🫠

ἔρως•3d ago

the copy outer html and dumping css may work you can also do the "delete until the problem vanishes, then ctrl-z" this way, you quickly get to a minimal verifiable repeatable example

b1mind•3d ago

https://stackblitz.com/

StackBlitz | Instant Dev Environments | Click. Code. Done.

StackBlitz is the collaborative browser-based IDE for web developers. StackBlitz eliminates time-consuming local configuration and lets developers spend more time building.

b1mind•3d ago

If you can't simplify it for what ever reason, you can load your whole project into stack blitz and link that.

clevermissfox•3d ago

Then idk what to tell you if typing “react” and hitting enter is too much or right clicking and pressing copy element then pasting it is too much, I’m afraid that this is not the right field for you. Please review #how-to-ask-good-questions and if you end up motivated to provide the code needed in order to receive help , by putting in any one of the amazing tools we have now (try coding in 2005) I’m sure you’ll get the help you’re seeking. But effort is required in your part, this isn’t a magical channel 😆

Faisu0pOP•3d ago

Guys i fixed the issue , thanks for investing ur time ❤️ .close !close

b1mind•3d ago

You can't close you can add the :solved: tag

Faisu0pOP•3d ago

oh okay thanks

Gaming

Programming

Content going upwards and out of viewport when adding new things below