Preventing flexbox relative element from being moved when resizing window-CodePudding

How can I prevent the "about" section (flexcontainer div) from being moved by the header element?

I have a distance between the header element, a title and nav bar, and the "about" section. Upon resizing the window, the "about" section gets moved, when there is still space inbetween the elements.

HTML Code:

<body style="background-image: url(#); background-color: #a6afbe;">
    <header>
        <h1>Haruhi Suzumiya 3D School</h1>
        <nav>
            <ul >
                <li><a  href="#">Home</a></li>
                <li><a  href="#">About</a></li>
                <li><a  href="#">Pictures</a></li>
                <li><a  href="#">Contact</a></li>
                <li><a 
                        href="#"</a></li>
            </ul>
        </nav>
    </header>

    <div  style="top: 30rem">
        <section>
            <h2>About</h2>
            <article>
                <p >
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS Syle:

.flexcontainer {
  top: inherit;
  display: -webkit-flex;
  display: flex;
  position:relative; 
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  
}

header {
  display: flex;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
}

Illustration displaying how it looks when not being moved: Element not moved

Illustration displaying how it looks when being resized and moved: Element being moved

CodePudding user response：

The about section is moving away from the top thanks to style="top: 30rem. You should remove your inline style attribute and use a media query in the main css file for your "flexcontainer" class. My suggustion for any future webpage related projects is to build the site mobile first.

e.g:

@media screen and (max-width: 1000px){
   top: 30rem
}

@media screen and (max-width: 500px){
   top: 20rem
}

@media screen and (max-width: 300px){
   top: 15rem
}

CodePudding user response：

I found a solution! I used absolute positioning on the header.

Code:

<body style="background-image: url(#); background-color: #a6afbe;">
    <div >
        <header>
            <h1>Haruhi Suzumiya 3D School</h1>
            <nav>
                <ul >
                    <li><a  href="#">Home</a></li>
                    <li><a  href="#">About</a></li>
                    <li><a  href="#">Pictures</a></li>
                    <li><a  href="#">Contact</a></li>
                    <li><a  href="#">Wiki</a></li>
                </ul>
            </nav>
        </header>

        <section  style="top: 45rem" >
            <h2>About</h2>
            <article>
                <p >
                  texttexttext
                </p>
                <img src="#" alt="">
            </article>
        </section>
    </div>
</body>

CSS:

.flexcontainer {
  position: relative; 
  top: inherit;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}

header {
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
}

Illustration of not being moved: not being moved

Illustation of not being moved when resizing: enter image description here