Fixing some responsive things (#1314)

Signed-off-by: Thomas Poignant <thomas.poignant@gofeatureflag.org>
thomaspoignant · Nov 30, 2023 · 0b0bf3b · 0b0bf3b
1 parent c420ddd
commit 0b0bf3b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/website/src/components/home/HomeHeader/styles.module.css b/website/src/components/home/HomeHeader/styles.module.css
@@ -65,7 +65,7 @@ svg:not(:root) {
 }
 
 .availableGH button {
-  margin-right: 1rem;
+  margin: 0.5rem;
 }
 
 .descriptionFirstLine{

diff --git a/website/src/components/home/features/index.js b/website/src/components/home/features/index.js
@@ -16,7 +16,7 @@ SocialIcon.propTypes = {
 };
 function SocialIcon(props) {
   return (
-    <div className="col-1-4 mobile-col-1-4">
+    <div className="col-1-4 mobile-col-1-2">
       <div className={styles.tooltip}>
         <span className={clsx(styles.socialIcon, props.colorClassName)}>
           {props.fontAwesomeIcon && <i className={props.fontAwesomeIcon}></i>}

diff --git a/website/src/components/home/using-it/index.js b/website/src/components/home/using-it/index.js
@@ -15,16 +15,12 @@ export function UsingIt() {
         <div className={clsx('col-1-1')}>
           <span className={clsx(styles.mainTitle)}>Who is using GO Feature Flag?</span>
           <div className={clsx("grid grid-pad", styles.logo)}>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={clsx("col-1-10 mobile-col-1-5")}><Link to={"https://github.com/lyft/atlantis"}><img src={lyft} alt={"Lyft"} /></Link></div>
-            <div className={"col-1-10 mobile-col-1-5"}><img src={chapatiSystems} alt={"chapati systems"} /></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
-            <div className={"col-1-10 mobile-col-1-5"}></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"></div></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"></div></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"><Link to={"https://github.com/lyft/atlantis"}><img src={lyft} alt={"Lyft"} /></Link></div></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"><img src={chapatiSystems} alt={"chapati systems"} /></div></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"></div></div>
+            <div className={"col-1-6 mobile-col-1-1"}><div className="content"></div></div>
           </div>
         </div>
       </div>

diff --git a/website/src/components/home/using-it/styles.module.css b/website/src/components/home/using-it/styles.module.css
@@ -22,6 +22,10 @@
   min-height: 100px;
   display: flex;
   align-items: flex-end;
+  margin: 0 auto;
+  height: auto;
+  position: relative;
+  width: 100%;
 }
 
 .contactUs{