CODEWITHSUNDEEP
htmlcss
mouchin777
mouchin777

Reputation: 1588

How to prevent position of a div from changing on resizing the screen

I have this code

<div id="PageContainer">
    <main>
      <section id="section1">
        <div id="section1width">
          <div id="section1Content">
            <p id="logo">Logo</p>
            <h1 id="h1Section1">Start tracking your life with MementoMori</h1>
            <p id="pSection1">Improves life check</p>
            <div id="buttonCenterSection1">
              <button>Try it</button>
            </div>
            <div id="bigTextSection1Container">
              <div id="bigTextSection1">
                <p id="pSection1"> Try mementomori now, and start lorem impusm lorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusmlorem impusm</p>
              </div>
            </div>
            <div id="imgContainerSection1">
              <img id="imgSection1" src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"></img>
            </div>
          </div>
        </div>
      </section>
      <section id="section2"></section>
    </main>
  </div>

And this css

    *{
    margin: 0;
    padding:0;
    box-sizing: border-box;
}

#section1{
    height:100vh;
    background-color: blue;
    display:flex;
    justify-content: center;
}
#section1width{
    width:60%;
    height:80%;
    background-color:purple;
    display:flex;
    justify-content:center;
    
}

#section1Content{
    width:80%;
    
    
}
#logo{
    text-align:center;
}

#h1Section1{
    text-align:center;
}
#pSection1{
    text-align:center;
}

#buttonCenterSection1{
    display:flex;
    justify-content: center;
}
#bigTextSection1Container{
    display:flex;
    justify-content: center;
}
#bigTextSection1{
    width:50%;
}
#imgContainerSection1{
   
    display:flex;
    justify-content:center;
}

#imgSection1{
    width:75%;
    height:75%;
}

#section2{
    height:100vh;
    background-color:red;
}

The problem im facing is the following

enter image description here

Im trying to move the red box, to the yellow position. I did it with a magrin-top: 15vh, but the problem is that its not responsive, and if I change the screen size, it all gets messed up again.

How Do i Apply a margin top there without messing the structure when screen resizes?

Upvotes: 1

Views: 207

Answers (1)

theFrontEndDev
theFrontEndDev

Reputation: 973

I did not completely understand your requirement. Based on my understanding, I think you want the #section1Content to always stay at same position even while resizing. The issue is you have given the margin top in vh unit ( change based on window height). Try giving margin-top in px and try resizing.

margin-top: 200px;

enter image description here

This is what you require right ? Please try this and tell if this is what you wanted

Upvotes: 1

Related Questions