Responsive de mon site web

Version imprimable

Bonsoir tout le monde J'ai blâme avec mon site le responsive ne fonctionne pas en petit ecran
le bouton home n'affiche pas aide moi à resoudre ce probleme

voici le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@media (max-width: 952px){
    label.logo{
        font-size: 30px;
        padding-left: 50px;
    }
 
    nav ul li a{
        font-size: 16px;
    }
 
    @media (max-width: 858px){
        .chekbtn{
            display: block;
        }
 
        ul{
            position: fixed;
            width: 100%;
            height: 100vh;
            background: #2c3e50;
            top: 80px;
            left: -100%;
            text-align: center;
            transition: all.5s
        }
 
        nav ul li{
            display: block;
            margin: 50px 0;
            line-height: 30px;
        }
 
        nav ul li a{
            font-size: 20px;
        }
 
        a:hover,a.active{
            background: none;
            color: #0082e6;
        }
 
        #check:checked ~ ul{
            left: 0;
        }
 
        section{
            background: url(bg1.jpg) no-repeat;
            background-size: cover;
            height: calc(100vh - 80px);
        }
    }
}

10/03/2020, 10h30
NoSmoking

Bonjour,

Citation:

le bouton home n'affiche pas

sans le code HTML lié il va être difficile de trouver de l'aide !

ok je vais mettre le html et le css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
 
<meta charset="utf-8" />
    <title>Responsive navbar</title>
<meta name="viewport" content ="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="not.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
 
<body>
 
<nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
        <i class="fas fa-clock"></i>
    </label>
 
<label class="logo">Design</label>
                   <ul>
                   <li><a class="active" href="#">Home</a> </li>
                       <li><a href="#">About</a> </li>
                       <li><a href="#">Service</a> </li>
                       <li><a href="#">Contact</a> </li>
                       <li><a href="#">Feedback</a> </li>
    </ul>
 
</nav>
    <section>
 
    </section>
    </body>
 
</html>

voici la partie css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
*{
padding:0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
 
body{
    font-family: montserrat;
}
 
nav{
    background: #0082e6;
    height: 80px;
    width: 100%;
}
 
label.logo{
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}
 
nav ul{
float: right;
    margin-right: 20px;
}
 
nav ul li{
display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}
nav ul li a{
    color: white;
    font-size: 17px;
    padding: 7px 13px;
    border-radius: 3px;
    text-transform: uppercase;
}
 
a.active,a:hover{
    background: #1b9bff;
    transform: .5s;
}
.checkbtn{
    font-size: 30px;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 40px;
    cursor: pointer;
    display: none;
}
 
#check{
    display: none;
}
 
article h1{
    color: red;
}
 
@media (max-width: 952px){
    label.logo{
        font-size: 30px;
        padding-left: 50px;
    }
 
    nav ul li a{
        font-size: 16px;
    }
 
    @media (max-width: 858px){
        .chekbtn{
            display: block;
        }
 
        ul{
            position: fixed;
            width: 100%;
            height: 100vh;
            background: #2c3e50;
            top: 80px;
            left: -100%;
            text-align: center;
            transition: all .5s;
        }
 
        nav ul li{
            display: block;
            margin: 50px 0;
            line-height: 30px;
        }
 
        nav ul li a{
            font-size: 20px;
        }
 
        a:hover,a.active{
            background: none;
            color: #0082e6;
        }
 
        #check:checked ~ ul{
            left: 0;
        }
 
        section{
            background: url(nac.jpg) no-repeat;
            background-size: cover;
            height: calc(100vh - 80px);
        }
    }
}

Au jeu de l'erreur, il te manque un c
entre

Code:

1
2
3
4
@media (max-width: 858px){
    .chekbtn{
        display: block;
    }

Code:

1
2
3
4
@media (max-width: 858px){
    .checkbtn{
        display: block;
    }

13/03/2020, 22h30
Boulaye DIALLO

Merci infiniment le probleme est resolu