diff --git a/web/e.cash/components/sub-page-hero/index.js b/web/e.cash/components/sub-page-hero/index.js --- a/web/e.cash/components/sub-page-hero/index.js +++ b/web/e.cash/components/sub-page-hero/index.js @@ -2,7 +2,7 @@ import AnimateImage from '/components/animate-image'; import H2 from '/components/h2'; import { Container } from '/components/atoms'; -import { HeroCtn, ImgCtn, TextCtn } from './styles'; +import { HeroCtn, ImgCtn, TextCtn, OuterHeroCtn } from './styles'; export default function SubPageHero({ image, // lottie json file to use in the AnimateImage component @@ -13,7 +13,7 @@ children, // any children }) { return ( - <> + @@ -30,6 +30,6 @@ - + ); } diff --git a/web/e.cash/components/sub-page-hero/styles.js b/web/e.cash/components/sub-page-hero/styles.js --- a/web/e.cash/components/sub-page-hero/styles.js +++ b/web/e.cash/components/sub-page-hero/styles.js @@ -1,13 +1,20 @@ import styled from 'styled-components'; +export const OuterHeroCtn = styled.div` + width: 100%; + position: relative; +`; export const HeroCtn = styled.div` display: flex; padding-top: 130px; position: relative; - min-height: 100vh; + min-height: 700px; + height: 100vh; + align-items: center; ${props => props.theme.breakpoint.medium} { flex-direction: column-reverse; + height: 100%; } `; diff --git a/web/e.cash/components/videobackground/styles.js b/web/e.cash/components/videobackground/styles.js --- a/web/e.cash/components/videobackground/styles.js +++ b/web/e.cash/components/videobackground/styles.js @@ -2,8 +2,7 @@ export const VideoCtn = styled.div` width: 100%; - height: 100vh; - min-height: 600px; + height: 100%; position: absolute; z-index: 0; video {