From 2fa7dc11211ae136487ff30965c2e3085d3b1cda Mon Sep 17 00:00:00 2001 From: Hugues <hugues@lydra.fr> Date: Fri, 13 Aug 2021 10:31:04 +0000 Subject: [PATCH] fix: bug header on small screen --- src/css/custom.css | 8 ++++++++ src/pages/index.js | 2 +- src/pages/index.module.css | 23 ++++++++++++++++------- 3 files changed, 25 insertions(+), 8 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index d9483b9..df1133c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -76,6 +76,7 @@ p { z-index: 1; } +/************ Header style ***********/ header { height: 500px; clip-path: polygon( @@ -84,6 +85,13 @@ header { 100% calc(100% - 6vw),0 100%) } +.hero__subtitle { + width: 90%; + text-align: center; + margin: auto; + padding-bottom: 20px; +} + /************ main elements style***********/ .section-promises { padding: 4rem 0; diff --git a/src/pages/index.js b/src/pages/index.js index 094de15..9331def 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -10,7 +10,7 @@ function HomepageHeader() { const { siteConfig } = useDocusaurusContext(); return ( <header className={styles.heroBanner}> - <div className="container"> + <div className="sections container"> <h1 className="hero__title">{siteConfig.title}</h1> <p className="hero__subtitle">{siteConfig.tagline}</p> <Link className="button button--warning button--lg" to="https://youtu.be/gOCOai6wX_w"> diff --git a/src/pages/index.module.css b/src/pages/index.module.css index 57121c5..81802d3 100644 --- a/src/pages/index.module.css +++ b/src/pages/index.module.css @@ -13,13 +13,7 @@ display: flex; align-items: center; justify-content: center; - background-color: var(--ifm-color-light-green); -} - - @media screen and (max-width: 966px) { - .heroBanner { - padding: 2rem; - } + background-color: var(--ifm-color-light-green); } .container { @@ -28,3 +22,18 @@ align-items: center; justify-content: center; } + + @media screen and (max-width: 966px) { + .heroBanner { + padding: 2rem; + } +} + +@media screen and (max-width: 767px) { + header { + height: 100%; + } + .heroBanner { + padding: 1rem; + } +} -- GitLab