From d4cdd3cee120e84f5bd96b9f32d314b89f38cb43 Mon Sep 17 00:00:00 2001 From: Firesieht Date: Sun, 28 Aug 2022 04:17:19 +0300 Subject: [PATCH] add mobile adaptive --- Components/ErrorViewer/error.module.css | 8 ++++++ Components/header/header.module.css | 25 +++++++++++++++++- Components/header/index.tsx | 7 ++--- styles/Home.module.css | 35 +++++++++++++++++++++++++ 4 files changed, 71 insertions(+), 4 deletions(-) diff --git a/Components/ErrorViewer/error.module.css b/Components/ErrorViewer/error.module.css index e643584..c3886b8 100644 --- a/Components/ErrorViewer/error.module.css +++ b/Components/ErrorViewer/error.module.css @@ -85,4 +85,12 @@ display: flex; gap:5px; align-items: center; +} + +@media screen and (max-width: 1000px) { + .card{ + flex-wrap: wrap; + } + + } \ No newline at end of file diff --git a/Components/header/header.module.css b/Components/header/header.module.css index 6056925..f7c238d 100644 --- a/Components/header/header.module.css +++ b/Components/header/header.module.css @@ -47,4 +47,27 @@ color: #FFFFFF; background: #13377D; transition: 0.3s; -} \ No newline at end of file +} +.burger{ + display: none; +} +@media screen and (max-width: 1500px) { + .logo{ + display: none; + } +} + +@media screen and (max-width: 1000px) { + .header{ + flex-direction: column; + } + .itemWrapper{ + flex-wrap: wrap; + } + .burger{ + display: block; + height: 60px; + } + +} + \ No newline at end of file diff --git a/Components/header/index.tsx b/Components/header/index.tsx index b73c1cc..596fc18 100644 --- a/Components/header/index.tsx +++ b/Components/header/index.tsx @@ -1,17 +1,18 @@ import { useRouter } from "next/router"; -import React from "react"; +import React, { useState } from "react"; import styles from "./header.module.css" import 'antd/dist/antd.css'; export const Header:React.FC = () =>{ let router = useRouter() - + const [open, setOpen] = useState(true) return(
router.push("/")}>
-
+ setOpen(!open)}> +
router.push("/")}> Проверить документы
diff --git a/styles/Home.module.css b/styles/Home.module.css index 60a26fd..9d7650a 100644 --- a/styles/Home.module.css +++ b/styles/Home.module.css @@ -220,4 +220,39 @@ /* main/black */ color: #000000; +} + +@media screen and (max-width: 1000px) { + .h1{ + font-size: 24px; + } + .main{ + padding:0px 25px; + padding-top: 150px; + flex-direction: column; + justify-content: center; + align-items: center; + } + .pagination{ + gap:50px; + display: flex; + flex-direction: column; + width: 100%; + } + .progress{ + width: 100%; + } + .downloadStars{ + display: none; + } + .programs{ + flex-wrap: wrap; + } + .profileWrapper{ + flex-wrap: wrap; + } + .profileCard{ + min-width: 120px; + } + } \ No newline at end of file