Tue Dec 12, 2017 5:00 PM

Keep footer at the bottom of page

When your content doesn't fill the page, the footer won't stay at the bottom of the page by default. 

There are a lot of solutions available to solve this with javascript, CSS tables, and using .fixed.  I don't like these hacky solutions that provide inconsistent results.  Using CSS flex, you can achieve the desired results consistently using only CSS.

First, add a class to your body. I prefer to use the site name for easier file searching. In this case, let's name it sample.

<body class="sample-body">
  ...
</div>

Next, wrap your content like so:

<body class="sample-body">
  <div class="sample-content">
    ...
  </div>
  <footer>
    ...
  </footer>
</body>

In your CSS, add styles to display the body as a flex column using vertical-height:

.sample-body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

then make sure that the content takes up the full column:

.sample-content {
  flex: 1;
}

Thu Apr 26, 2018 2:00 PM
guide
Add style options when initializing the Stripe Element object, like so: var style = { base: { // Add your base input styles here. For example: fontSize: '16px', lineHeight: '24px', iconColor: '#c4f0ff', color: '#fff', fontSmoothing: 'antialiased', fontWeight: 500, '::placeholder': { color: '#ffffff', }, ':-webkit-autofill': { color: '#ffffff', } }, invalid: { iconColor: '#FFC7EE', color: '#FFC7EE', }, }; View all Element optionsĀ more