Preventing flexbox relative element from being moved when resizing window

Question

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 class="nav-list">
                <li><a class="noselect" href="#">Home</a></li>
                <li><a class="noselect" href="#">About</a></li>
                <li><a class="noselect" href="#">Pictures</a></li>
                <li><a class="noselect" href="#">Contact</a></li>
                <li><a class="noselect"
                        href="#"</a></li>
            </ul>
        </nav>
    </header>

    <div class="flexcontainer" style="top: 30rem">
        <section>
            <h2>About</h2>
            <article>
                <p class="main">
                  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

Alisha · Answer 1 · 2022-07-05T10:20:49.720

0

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
}

edited Jul 05 '22 at 10:20

answered Jul 05 '22 at 10:14

Alisha

1
2

Is the only way of controlling the distance between these elements by manually defning all the possible media width and height ratios? – Squirrel Modeller Jul 05 '22 at 10:17
You don't have to define all possible media with/height ratios (that would be too much code for your css file), I'd suggust only using 3 main media queries & having a look at this tread which explains which media queries to use: https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile – Alisha Jul 05 '22 at 10:24

Squirrel Modeller · Accepted Answer · 2022-07-05T11:10:27.230

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

Code:

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

        <section  style="top: 45rem" >
            <h2>About</h2>
            <article>
                <p class="main">
                  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

Preventing flexbox relative element from being moved when resizing window

2 Answers2