From 6ff8f5c3ee9df6cf1995ad70fbd09ebef4413fee Mon Sep 17 00:00:00 2001 From: George Cushen Date: Wed, 11 Nov 2020 00:07:00 +0000 Subject: [PATCH] fix(style): fix case where widget background overlays content Issue was primarily noticed when setting a background image on the Hero or Portfolio widgets. Also, fix background not showing in Firefox due to unsupported `fill-available`. Fixes b647d7e81a5ac59326fe8e5a1424df6a8bff7146 --- wowchemy/assets/scss/wowchemy/_widgets.scss | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/wowchemy/assets/scss/wowchemy/_widgets.scss b/wowchemy/assets/scss/wowchemy/_widgets.scss index f8915cd1..19bb6663 100644 --- a/wowchemy/assets/scss/wowchemy/_widgets.scss +++ b/wowchemy/assets/scss/wowchemy/_widgets.scss @@ -74,10 +74,9 @@ position: absolute; top: 0; left: 0; - height: fill-available; - height: -webkit-fill-available; - width: fill-available; - width: -webkit-fill-available; + height: 100%; // Or fill-available when supported. + width: 100%; // Or fill-available when supported. + z-index: -1; // Place bg div behind content. } /* Default background image properties for home sections. */ @@ -149,14 +148,7 @@ **************************************************/ .wg-hero { - padding: 3em 0; - clear: both; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - animation: intro 0.3s both; - animation-delay: 0s; - animation-delay: 0.25s; + padding: 3em 0; // More compact top and bottom padding for Hero. } .hero-title {