Bootstrap header rendering differently in Firefox

sage
,
1

Hi, I am using Sage 9 and Bootstrap 4.0.0-beta.2, but I have a small problem with the header HTML code. It renders differently in Firefox, whilst being fine in Chrome, in an appropriate position on the page, the H1 tag comes right at the top of the page in Firefox very close to the top, not really acceptable viewing, and I can’t figure out why. Code for the header.blade is below:

<div class="cover-container">
  <div class="cover-inner container">
      <div class="row justify-center">
        <div class="col-lg-12 mt-12 mb-12 text-center">
          <h1 class="jumbotron-heading>The Heading</h1>
          <p class="lead">Some sample text to fill in</p>
          <p>
        </div>
    </div>
  </div>
</div>

It’s inside a section called cover-1 and CSS is below:

.cover-1 {
	background: $background-color url(../images/cover-bg-1.jpg) center;
	background-size: cover;
	min-height: 50rem;
	height: auto;
	border-radius: 0;
	width: 100%;
	color: #fff;
	padding-top: 1rem;
	h1 {
		font-weight: 200;
	}
	p.lead {
		font-family: $headline-font;
		margin: 2rem auto;
		color: rgba(255, 255, 255, .75);
	}
	.cover-container {
		display: table;
		height: 100%;
		min-height: 44rem;
		margin: 0 auto;
	}
}
.cover-inner {
	display: table-cell;
	vertical-align: middle;
}

As usual, any tips welcome! PS Sage 9 is pretty cool especially with all the work already done on Webpack, maybe you could also look at new https://parceljs.org/ bundler. Thanks!

Chrome view

chrome|690x345!

Firefox view

firefox|690x263

2

You’re missing a double-quote after the h1 class attribute.

1 Like