add mobile adaptive

This commit is contained in:
Firesieht 2022-08-28 04:17:19 +03:00
parent 679c463d0c
commit d4cdd3cee1
4 changed files with 71 additions and 4 deletions

View File

@ -86,3 +86,11 @@
gap:5px;
align-items: center;
}
@media screen and (max-width: 1000px) {
.card{
flex-wrap: wrap;
}
}

View File

@ -48,3 +48,26 @@
background: #13377D;
transition: 0.3s;
}
.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;
}
}

View File

@ -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(
<div className={styles.header}>
<div className={styles.logo} onClick={()=>router.push("/")}>
<img src="/images/logo.svg"></img>
</div>
<div className={styles.itemWrapper}>
<img src="/images/logo.svg" className={styles.burger} onClick={()=>setOpen(!open)}></img>
<div className={styles.itemWrapper} style={{display: open? "":"none"}}>
<div className={styles.item} onClick={()=>router.push("/")}>
Проверить документы
</div>

View File

@ -221,3 +221,38 @@
/* 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;
}
}