Merge pull request #39 from lesenelir/fix-mobile

fix: adapt to common mobile layout css
jotaijs · Nov 20, 2023 · 8f0bcd4 · 8f0bcd4
2 parents 6131c78 + 9ce5a90
commit 8f0bcd4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -150,7 +150,7 @@ h2 {
 }
 
 .header-cont {
-  padding: 0 15px 0 15px;
+  padding: 0 8px 0 8px;
   display: flex;
   justify-content: space-between;
   height: 60px;
@@ -172,6 +172,13 @@ h2 {
   margin: 5px;
 }
 
+/* support Samsung Galaxy S8+ */
+@media screen and (max-width: 380px) {
+  .header-btn {
+    font-size: 14px;
+  }
+}
+
 a {
   text-decoration: none;
   height: max-content;
@@ -199,7 +206,7 @@ a {
 .link-cont {
   display: flex;
   align-items: center;
-  gap: 25px;
+  gap: 20px;
 }
 
 .home-btn {

diff --git a/app/quick-start/Header.tsx b/app/quick-start/Header.tsx
@@ -2,9 +2,9 @@
 
 import React from "react";
 import Hamburger from "./Hamburger";
-import { AiFillGithub } from "react-icons/ai"
+import { AiFillGithub } from "react-icons/ai";
 import { atom, useAtom } from "jotai";
-import { BsSun, BsFillMoonStarsFill } from "react-icons/bs"
+import { BsSun, BsFillMoonStarsFill } from "react-icons/bs";
 
 const theme = atom('light');
 export const themeAtom = atom(get => get(theme), (get, set) => {
@@ -48,4 +48,4 @@ function Header() {
   );
 }
 
-export default Header;
+export default Header;