1

I'm trying to centre my 'Hello' text in the middle of the image and keep it responsive. Because the .welcome div comes after the .section1-bg div it drops the height of the text to below centre.

How can I centre my 'Hello' text both vertically and horizontally whilst still keeping my navbar where it is and keeping the site responsive?

body {
  font-family: 'Roboto', sans-serif;
  font-family: 'Spectral', serif;
}

.section1 {
  margin: 0px;
  padding: 0px;
}

.section1-bg {
  background-image: url("Images/b.jpg");
  background-size: cover;
}

.welcome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid col-lg-12 section1 section1-bg">
  <div class="row">
    <navbar class="col-lg-offset-3 col-lg-6 col-md-offset-3 col-md-6 col-sm-offset-3 col-sm-6 col-xs-offset-3 col-xs-6">
      <div class="nav-left navbar-brand">
        BRAND
      </div>
      <div class="nav-right pull-right">
        <ul class="nav navbar-nav">
          <li><a href="#section1 page-scroll">HOME</a></li>
          <li><a href="#section2 page-scroll">ABOUT</a></li>
          <li><a href="#section3 page-scroll">PROJECTS</a></li>
          <li><a href="#section4 page-scroll">CONTACT</a></li>
        </ul>
      </div>
    </navbar>
  </div>
  <div class="welcome text-center col-lg-offset-4 col-lg-4">
    <h1>Hello!</h1>
    <h2>Want to see what I've made?</h2>
    <a href="#section3 page-scroll">Yes!</a>
  </div>
</div>

Thanks in advance.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Matthew
  • 77
  • 1
  • 1
  • 7
  • 1
    Try using `position:relative` and adjust the `top` value to something negative to push it up? – Toastrackenigma Jun 30 '17 at 00:39
  • First, you shouldn't use `col-lg-12` on the container, ... second, your `welcome` doesn't have `row` wrapper, which it should, ... third, center of the image or center of viewport ? (btw, based on how the image actually render, it would be great if you added that to the demo) ... fourth, mix bootstrap 3 with Flexbox is not that great, maybe you should move to bootstrap 4 (which is based on Flexbox)? – Asons Jun 30 '17 at 08:41

0 Answers0