Skip to main content
K
kpmi
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

O
osgood_
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 */

}

    K
    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.

    K
    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 ☺

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices