Skip to main content
Known Participant
September 15, 2015
Question

Another Jumbotron question -- extra white space at bottom

  • September 15, 2015
  • 1 reply
  • 6373 views

Hi again!

I solved my own issue a minute ago, but I still can't figure out how to get rid of the white space at the bottom of the jumbotron. I have set all padding and margins to "0" but it's still there.

  <div class="jumbotron" width="100%">

    <p><br /><br /><br /><br /><br /><br /></p>

  

    <h1>Kairos Prison Ministry</h1>

    <p><br /><br /><br /><br /><br /><br />The mission of Kairos Prison Ministry is to share the transforming  love and forgiveness of Jesus Christ<br>

to impact the hearts and lives of  incarcerated men, women and youth, as well as their families, <br>

to become loving  and productive citizens of their communities.<br /><br /></p>

    <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a><br /><br /></p>

  </div>

CSS:

.jumbotron {

  background-image: url(../images/hands_bars.jpg);

  background-repeat: no-repeat;

  display: block;

  background-size:cover;

  width: 100%;

  padding: 0px;

  margin-bottom: 0px;

  margin-top: 0px;

  background-color: #3458B8;

}

This topic has been closed for replies.

1 reply

Legend
September 15, 2015

It must be coming from a padding or margin - insert the below css in the page in question directly before the closing </head> tag. It will determine IF it is a padding or margin on some element that is causing the issue as this bit of code should set ALL padding and magin to zero.

* {

padding: 0;

margin; 0;

}

IF it is down to padding or margin can you upload the page so we can look at the code?

Failing that set the <h1> and <p> tags in the jumbotron to padding: 0; margin: 0; as it is most likely one or both of those which is causing the space.

Also dont use <br /><br /><br /> to create space, its ugly bloated coding, use some padding:

h1 {

margin: 0;

padding: 100px 0 100px 0; /*top, right, bottom, left */

}

kpmiAuthor
Known Participant
September 15, 2015

Thanks, Osgood!

I tried the style code at the top, and it didn't make a difference. But fixing the padding took away the white space. I'm not sure I quite understand why, but it works.


(I didn't use padding because I thought that would make it look strange when the page got smaller, but I have to learn to trust CSS more. I used to design websites for PBS back in the days of straight HTML coding, and the very beginning of CSS, and am now getting back into it. My how the world has changed!)

Last question -- is there any way to keep the hands centered as the page shrinks? They disappear offscreen and only the left bars are seen.

I wish I could put this online for you, but I don't have access to the server where I work. I just started here two months ago, and am redesigning the site. Then I'll maintain it. Right now someone else is (not) doing that.

kpmiAuthor
Known Participant
September 16, 2015

kpmi wrote:

Last question -- is there any way to keep the hands centered as the page shrinks? They disappear offscreen and only the left bars are seen.

Try background-position: center, center; as below in combination with background-cover:

-webkit-background-size: cover;

-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center, center;


It works!!

You guys are brilliant ☺