Skip to content

Instantly share code, notes, and snippets.

@carolineschnapp

carolineschnapp/bottom-align slide text and button.md

Created March 26, 2016 15:40
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save carolineschnapp/424d2c7c2107498bf65f to your computer and use it in GitHub Desktop.
Save carolineschnapp/424d2c7c2107498bf65f to your computer and use it in GitHub Desktop.
Download ZIP
Bottom-align slides' text and button in #Brooklyn theme
Raw
bottom-align slide text and button.md

What you have

Alt text

What you want

Alt text

How to get it

  1. Disable the parallax effect applied to your hero slideshow by changing the line {% assign hero_parallax = true %} to {% assign hero_parallax = false %} in the snippet file hero.liquid. With parallax enabled, the bottom-aligned content would disppear as you scroll down.

  2. Add the below CSS at the very bottom of your theme.scss.liquid file:

    .hero__text-content {
  vertical-align: bottom;
  padding-bottom: 50px !important /* To leave room for the slideshow navigation */;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment