Bonjour;
Je cherche à rendre l'entête de mon site responsive afin qu'il s'adapte à tous les écrans mais je suis coincé sur les écrans dont la taille est supérieur à 991.
Je sais plus comment m'y prendre.
Ci-dessous le code html de l'entête:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
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 <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script> <div class="bg-top navbar-light d-flex flex-column-reverse" style="margin-bottom:10px;"> <link rel="stylesheet" href="style-media-b4.css" type ="text/css" /> <div class="container py-3" id="container-header"> <div class="row no-gutters d-flex align-items-center align-items-stretch"> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4" id="localisation"> <div class="row d-flex"> <div class="col-md d-flex topper align-items-center align-items-stretch py-md-4"> <div class="icon d-flex justify-content-center align-items"><br><br></div> <div class="text"> <h5><span><b>Localisation xx xxxxxx</b></h5></span> <span>xx, xxx xx xxxx-xxx xx xxxx<br> xxxxx xxxxxxxxxx - xxxxxxx<br> </div> </div> </div> <div class="row d-flex"> <div class="col-md d-flex topper align-items-center align-items-stretch py-md-4" id="telephone" style="margin-top:-65px;"> <div class="icon d-flex justify-content-center align-items"><br><br></div> <div class="text"> <span class="tel"> <b> Tél: (+xx)xxxxxxxxx <br> Fax: (+xx)xxxxxxxxx </b> </span> </div> </div> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4" id="logo"><br> <div class="d-flex align-items-center py-4"> <a href="index.php"><img src="images/logo-worked1.jpg" alt="logo GRATES" style="width: 100%; height: auto; display: block;"></a> </div> </div> <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4" id="heureouverture"> <div class="row d-flex"> <div class="col-md d-flex topper align-items-center align-items-stretch py-md-4"> <div class="icon d-flex justify-content-center align-items"></div> <div class="text"> <h5><span><b>Heures d'ouvertures</b></h5></span> <span>Lundi - Samedi 8H - 17H</span> </div> </div> </div> <div class="row d-flex"> <div class="col-md d-flex topper align-items-center align-items-stretch py-md-4" style="margin-top:-38px;"> <div class="icon d-flex justify-content-center align-items-center"></div> <div class="text" id="email"> <span>xxxxxx.xxx@xxxxxx.xx <br> xxxxxxx@xxxxxx.xx </span> </div> </div> </div> <div class="row d-flex"> <div class="col-md d-flex topper align-items-center align-items-stretch py-md-4" style="margin-top:-35px;"> <div class="text" id="siteweb"> <span>Site web: www.xxxxxx.xx </span> </div> </div> </div> </div> </div> </div> <div class="top-social-menu py-2 bg-light"> <div class="container"> <div class="row"> <div class="col"> <p class="social mb-0"> <a href="#"><i class="ion-logo-facebook"></i><span class="sr-only">Facebook</span></a> <a href="#"><i class="ion-logo-twitter"></i><span class="sr-only">Twitter</span></a> <a href="#"><i class="ion-logo-googleplus"></i><span class="sr-only">Googleplus</span></a> </p> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> <?php include('head.php'); ?> </div> </div> <br>
Ensuite voici le code du fichier css qui comporte les medias-queries:
Je travaille avec un template qui est en bootstrap4.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142 /* Smartphones en mode paysage */ @media (max-width: 576px) { #container-header { margin-top:-30px;margin-bottom:-35px;margin-right:0px; } #localisation { margin-top:20px;margin-bottom:-35px;margin-left:45px; } .tel { margin-top:25px;margin-bottom:45px; } #logo{ margin-top:-60px; margin-bottom:-35px; margin-left:60px; margin-right:0px; } #heureouverture { margin-top:20px;margin-left:45px; } #email { margin-top:25px; } #siteweb{ margin-top:25px;margin-bottom:15px; } } @media (min-width: 576px) { #container-header { margin-top:-30px;margin-bottom:-35px; } #localisation { margin-top:20px;margin-bottom:-35px; } .tel { margin-top:25px;margin-bottom:45px; } #logo{ margin-top:-30px; margin-bottom:-35px; } #heureouverture { margin-top:20px; } #email { margin-top:25px; } #siteweb{ margin-top:25px; } } /* Tablettes */ @media (min-width: 768px) { #container-header { margin-top:-30px;margin-bottom:-35px; } #localisation { margin-top:-5px;margin-bottom:-35px; } .tel { margin-top:3px; } #logo{ margin-top:-30px; margin-bottom:2px; } #heureouverture { margin-top:-5px; } #email { margin-top:0px; } #siteweb{ margin-top:0px; } } /* Grand écran */ @media (min-width: 992px) { #container-header { margin-top:-30px;margin-bottom:-35px; margin-left:270px; } #localisation { margin-top:-5px;margin-bottom:-35px; } .tel { margin-top:3px; } #logo{ margin-top:-30px; margin-bottom:-35px; } #heureouverture { margin-top:-5px; } #email { margin-top:0px; } #siteweb{ margin-top:0px;margin-bottom:8px; } } /* Très grand écran */ @media (min-width: 1200px) { #container-header { margin-top:-30px; margin-bottom:-35px; } }
Merci pour votre aide!
Partager