From 42ce95bb6558d153de3058f905740c6551039e3e Mon Sep 17 00:00:00 2001
From: HGouttebroze <hugues.gouttebrozze@etu.univ-st-etienne.fr>
Date: Thu, 12 Aug 2021 17:59:14 +0200
Subject: [PATCH] WIP: fix responsive bug on small size screens. Stay to change
some CSS properties on medias queries for more genericity
---
src/pages/index.js | 2 +-
src/pages/index.module.css | 23 ++++++++++++++++-------
2 files changed, 17 insertions(+), 8 deletions(-)
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