Bonsoir,

j'ai développé une page web.
Il me faut maintenant la transformer pour qu'elle soit compatible avec une tablette / portable.
L'affichage doit se faire sur une colonne sur une tablette / portable.
J'ai essayé dans le CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
@media (min-width: 481px) and (max-width: 1024px){
	.container {
	column-count: 1; 
}
}
Mon
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
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
<!DOCTYPE html>
<html>
  <head>
    <title>Mon projet de site</title>
    <meta charset="utf-8">
 
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles" />
  </head>
  <body>
  	<div class="container-fluid">
  		<div class="row">
  			<header class="col-12 text-center">
				<header style="background-color:#DAB30A;">
  				<h1><strong>Au bon goût du miel</strong></h1>
				<picture class="phto"><img src="images\capture2.jpg" alt="Photo d'abeilles"/></picture>
				<!img src="images\capture.jpg" height="150" width="225" alt="Photo d'abeilles"/>
  			</header>
  		</div>
  		<div class="row">
  			<nav class="col-12" id="nav-horizontal">
		<ul id="nav-horizontal">
			<li><a href="Présentation.html">Présentation</a></li>
			<li><a href="Evénements.html">Evénements</a></li>
			<li><a href="La Boutique.html">La Boutique</a></li>
			<li><a href="Nos Métiers.html">Nos Métiers</a></li>
			<li><a href="Nos Recettes.html">Nos Recettes</a></li>
			<li><a href="Contact.html">Contact</a></li>
		</ul>
  			</nav>
  		</div>
  		<div class="row">
  			<nav class="col-3" id="nav-vertical">
		<ul id="nav-vertical">
			<li><a href="Miel de printemps.html">Miel de printemps</a></li>
			<li><a href="Miel toutes fleurs.html">Miel toutes fleurs</a></li>
			<li><a href="Miel de lavande.html">Miel de lavande</a></li>
			<li><a href="Miel de forêt.html">Miel de forêt</a></li>
			<li><a href="Miel d'acacia.html">Miel d'acacia</a></li>
		</ul>
  			</nav>
 
 
  			<main class="col-9">
          <h1>Miel toutes fleurs</h1>
  			<div class="container">
            <div class="row">
              <div class="col-8">
                <h3>Un produit de terroir</h3>
                <p><strong>Le Miel de fleurs d'été est récolté et mis en pot en Bretagne.</strong></p>
                <h3>Un produit de qualité</h3>
                <p>Les principales fleurs visitées par les abeilles pour élaborer ce miel sont : la <strong>ronce</strong>, le <strong>châtaigner</strong>, le <strong>sarraisin</strong>, le <strong>trèfle blanc</strong>.</p>
				<p>Le miel est liquide à la récolte et cristallise rapidement une fois mis en pot.</p>
				<p>La cristrallisation est un phénomène naturel et indique que le miel n'a pas été chauffé et qu'il garde ainsi toutes ses propriétés bienfaisantes et gustatives.</p>
              </div>		  
              <div class="col-4">
                <img src="images\miel.jpg" height="250" width="305" alt="Photo de miel"/>
              </div>
 
 
 
 
 
 
		 <div class="col-8" id="table"> 
		 <caption><h1>Tableau de prix</h1></caption>
		  <table summary="prix selon taille du pot et livraison">
 
			<thead>
				<tr>
				<th></th>
				<th>250g</th>
				<th>500g</th>
				<th>750g</th>
				<th>1kg</th>
				</tr>
				</thead>
 
			<tbody>
				<tr>
				<th>retrait à la miellerie</th>
				<td>4€</td>
				<td>6€</td>
				<td>8€</td>
				<td>10€</td>
				</tr>
			</tbody>
			<tbody>
				<tr>
				<th>livraison à domicile</th>
				<td>7€</td>
				<td>9€</td>
				<td>11€</td>
				<td>13€</td>
				</tr>
			</tbody>
 
		</table>
 
 
 
			</div>			  
			</div>
          </div>
  			</main>
			</div>
 
 
  		<footer class="row">
  			<div class="col-4 text-center">
  				Livraison rapide
  			</div>
  			<div class="col-4 text-center">
  				Paiement sécurisé
  			</div>
  			<div class="col-4 text-center">
  				© développé par Stéphane Cozien
  			</div>
  		</footer>
  	</div>
  </body>
</html>
Et mon
Code CSS : 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
@media (min-width: 481px) and (max-width: 1024px){
	body {
	width : 100%;
	font-size: 2em;
}
}
 
@media (min-width: 481px) and (max-width: 1024px){
	.container {
	column-count: 1; 
}
}
 
nav, main, div {
	*border: 1px solid lightgrey;*
}
 
header {
	height: 200px;
	background: #DAB30A;
	color: #fff;
	font-size: 1em;
	display: flex;
	grid-gap: 10px 2em;
    align-items: center;
	justify-content : center;
	border-right: 1px solid #CCCCCC;
}
@media (min-width: 481px) and (max-width: 1024px){
header {
	height: 100%;
	background: #DAB30A;
	color: #fff;
	font-size: 1em;
	display: flex;
	grid-gap: 2em 2em;
    align-items: center;
	justify-content : center;
	border-right: 1px solid #CCCCCC;
}
}
 
 
 
 
#nav-horizontal {
  width: 700px;
  padding: 10px 10px 10px 10px;
  display: flex;
  align-items: center;
  justify-content : center;
}
nav ul{
	padding 0px;
	margin: 0px;
	list-style-type: none;
	background-color: #DAB30A;
}
 
nav li {
	display : inblock;
	width: 200px;
	height : 40px;
	margin: 0px;
	padding: 0px;
	border-right : 1px solid #CCCCCC;
	text-align: left;
	line-height: 40px;
}
 
nav li a{
	text-decoration: none;
	color: #FFFFFF;
}
 
 
#nav-vertical {
	padding: 10px 10px 10px 10px;
  	width: 200px;
}
main {
	min-height: 500px;
	padding: 1em;	
}
 
table {
	height: 150px;
	font-size: 1em;
	width:100%;
	padding: 1em;
}
caption {
	font-family:sans-serif;
}
thead {
	background-color:#DAB30A;
	color: #FFFFFF;
	text-align:center;
	border:1px solid #6495ed;
}
tbody {
	border:1px solid #6495ed;
}
th {
	border:1px dotted #6495ed;
	padding:5px;
	color: #FFFFFF;
	background-color:#DAB30A;
}
td {
	border:1px solid #6495ed;
	padding:5px;
	text-align:right;
}
Merci pour vos retours.