Home heading not extending to the end of the div
Reply: 2

heading not extending to the end of the div

J.G.Sable
1#
J.G.Sable Published in 2017-12-07 22:10:47Z

I have a heading banner that overlays across a background image for a tile. To make it responsive, I set the width to auto and it looks great on a collapsed screen (see capture below). Also, I'm using Bootstrap 4.

However, on full screen resolution, the heading background doesn't extend to the end of the div. I've tried to eliminate any padding, but I can't seem to get it to go to the end. See image.

Here's my HTML:

<!--browse by category section-->
    <section id="category">
        <div class="card-header text-center">
            <h4 class="card-title">Browse Workouts by Category</h1>
        </div>
        <div class="row btn-warning">
            <div class="col-sm-2 bg-primary" id="cardio">
                <h1 class="text-center">Cardio</h1>
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
            <div class="col-sm-2 bg-primary">
                Hi
            </div>
        </div>
    </section>

and my CSS:

/*--------------*/
/*---CATEGORIES-----*/
/*--------------*/

#cardio {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('../img/users/pexels-photo-460520.jpeg') no-repeat;
    background-size: cover;
    height: 300px;
}

#cardio h1 {
    margin-top: 100px;
    height: 100px;
    width: auto;
    padding-top: 25px;
    color: #fff;
    background: linear-gradient(rgba(93,139,229,0.7), rgba(93,139,229,0.7));
}
Matheus Alves
2#
Matheus Alves Reply to 2017-12-07 22:16:51Z

This should do it:

 .row, .col {
  padding: 0;
  margin: 0;
}

#cardio {
   padding: 0;
}

#cardio h1 {
   width: 100%;
}

Keep the rest as is

Temani Afif
3#
Temani Afif Reply to 2017-12-07 22:28:31Z

First you are missing the container div before the row. then, to force the title to be full width you need to add negative margin in order to override the padding of the outer class col-sm-2.

Avoid changing styles of bootstrap classes as I saw in other answers, this can break some of your other layout.

/*--------------*/


/*---CATEGORIES-----*/


/*--------------*/

#cardio {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/users/pexels-photo-460520.jpeg') no-repeat;
  background-size: cover;
  height: 300px;
}

#cardio h1 {
  margin-top: 100px;
  height: 100px;
  margin-left:-15px;
  margin-right:-15px;
  padding-top: 25px;
  color: #fff;
  background: linear-gradient(rgba(93, 139, 229, 0.7), rgba(93, 139, 229, 0.7));
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<!--browse by category section-->
<section id="category">
  <div class="card-header text-center">
    <h4 class="card-title">Browse Workouts by Category</h1>
  </div>
  <div class="container">
    <div class="row btn-warning">
      <div class="col-sm-2 bg-primary" id="cardio">
        <h1 class="text-center">Cardio</h1>
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
      <div class="col-sm-2 bg-primary">
        Hi
      </div>
    </div>
  </div>
</section>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.283736 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO