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 b647d7e81a
This commit is contained in:
George Cushen committed 2020-11-11 00:07:00 +00:00
1 parent f21a0cf8f4
commit 6ff8f5c3ee
1 file changed
+4 -12
+4 -12
View File
@@ -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 {