Quark: How to change display height of Hero image

Support Themes & Styling
4

@matteo,

If you don’t want to build/compile SCSS, but instead override the generated css file css-compiled/theme.min.css, you can do the following:

  • In an inherited theme
  • Create file ‘/user/themes/<my-theme>/css/custom.css’:
  • Add the following to ‘custom.css’
    // Use .hero-medium, or .hero-small, or ... depending on class set 
// for `hero_classes` in the frontmatter of the page.
.hero.hero-large {
    min-height: 500px;
}

.hero {
  padding-top: 6rem;
  padding-bottom: 7rem;
}
  • Change the values for min-height, padding-top and padding-bottom to your liking.