1

I'm trying to mimic the following site: http://weareundefined.be/ and once you get passed the first page by clicking it on it, there is a computer and a short paragraph below it.

After analyzing the site using dev webtool, I still am not able to center the elements properly. I attempted the top: 50% with position: relative, yet it is not centered correctly.

I tried to break down to the necessary CSS, but still not able to recreate it.

Code:

  <div style={{height: '100%’}}>
      <div className="container">
        <div id="rotate-container">
          <div>
            Center Me
          </div>
        </div>
        <h1> We are undefined</h1>
        <p>We're a creative agency with a focus on digital.</p>
      </div>
  </div>

CSS (SCSS):

.container {
  height: 100%;
  position: relative;
  padding: .5em;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  top: 50%;
}

#rotate-container {

  div {
    color: #fb3131;
    font-size: 40px;
    font-weight: bold;
    display: block;
  }
}

What could I be missing or doing incorrectly? And how are they handling the resizing of elements? Any suggestions or guidance would be greatly appreciated it.

Thank you in advance and will be sure to accept and upvote answer.

Jo Ko
  • 7,225
  • 15
  • 62
  • 120

2 Answers2

3

You're close. both html and body need to be height: 100%;, too, otherwise it's children won't be 100% of the viewport.

.container doesn't need height: 100%;. Since you already have .container at top: 50%;, just use transform: translateY(-50%); to shift it back up 50% of it's own width so the center of it is in the center of the browser.

body, html {
  height: 100%;
}

.container {
  position: relative;
  padding: .5em;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  top: 50%;
  transform: translateY(-50%);
}

#rotate-container div {
  color: #fb3131;
  font-size: 40px;
  font-weight: bold;
  display: block;
}
<div style="height:100%;">
  <div class="container">
    <div id="rotate-container">
      <div>
        Center Me
      </div>
    </div>
    <h1> We are undefined</h1>
    <p>We're a creative agency with a focus on digital.</p>
  </div>
</div>

You can also use flexbox with align-items: center;

body,
html {
  height: 100%;
}

.container {
  position: relative;
  padding: .5em;
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
}

#rotate-container div {
  color: #fb3131;
  font-size: 40px;
  font-weight: bold;
  display: block;
}
<div style="height:100%; display: flex; align-items: center;">
  <div class="container">
    <div id="rotate-container">
      <div>
        Center Me
      </div>
    </div>
    <h1> We are undefined</h1>
    <p>We're a creative agency with a focus on digital.</p>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • @MichelCoker Really appreciate the response! Just a few questions if you don't mind. Why is it that the parent of `class="container"` needs to be `relative` as well? So that the child `class="container"` moves (`top: 50%;`) its content relative to the parent? And could you elaborate on what `translateY(-50%);` is exactly doing? And why is it that `.container doesn't need height: 100%;`? And is flexbox preferred over the formal, and why is it that `html` also has to be 100%? Lastly, how is that particular site handling resizing to be responsive? – Jo Ko Feb 13 '17 at 22:54
  • 1
    @JoKo 1) my bad, I put that in before I had looked at your whole layout, `position: relative;` on the parent isn't necessary unless the child is `position: absolute;`. 2) https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY, 3) because you're centering that element, not the content inside of it, so it doesn't need to be 100% height. 4) a matter of opinion but probably, 5) http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height 6) CSS media queries – Michael Coker Feb 13 '17 at 23:11
-1

Try:

body {
min-width: 970px;
padding-top: 70px;
padding-bottom: 30px;
}

.container {
width: 970px;
max-width: none !important;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
text-align: center;
}

And adjust accordingly

Jim Jones
  • 161
  • 1
  • 2
  • 16