0

It needs to be responsive, so it appears to work until you resize to a smaller screen width and elements start unproportionally. Here is a JSfiddle link: https://jsfiddle.net/gn8L0rxu/

I need the "home-slider-caption col-sm-12" smack dab in the middle with it resizing properly to different browser sizes.

section.home-slider {
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  min-height: 630px;
  position: relative;
}

section.home-slider .home-slider-caption {
  width: 60%;
  position: absolute;
  top: 50%;
  right: 25%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}
section.home-slider h1 {
  color: #fff;
  letter-spacing: -4px;
  font-size: 5em;
  font-weight: 100;
  line-height: 1;
  text-align: center;
}
section.home-slider p {
  font-size: 1.3em;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
    <section class="home-slider" id="top">
        <div class="container">
            <div class="home-slider-caption col-sm-12">
                <h1>Sell Your Textbooks</h1>
                <p>We'll pay top dollar for your used books!</p>
                <a href="sell.html" class="btn btn-outline btn-primary btn-icon active btn-lg btn-rounded">Start Selling!<span class="fa fa-angle-right icon-with-btn"></span></a>
            </div>
        </div>
    </section>
Albert
  • 15
  • 3

1 Answers1

0

If i true understand questions, you must do this:

section.home-slider .home-slider-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%,-50%);  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  z-index: 1;
}

And don't use col-* without .row

Алексей Морозов
  • 187
  • 1
  • 1
  • 10