rendre mon site responsive
Titodeb Le 28 décembre 2022 à 18:49 (Édité le 28 décembre 2022 à 20:47)
Bonjour, J'aimerais que vous m'aidiez à rendre mon site responsive, c'est-à-dire qu’il soit lisible sur tous type d’écran ou du moins tablette, téléphone et ordinateur.
Je demande votre aide car je ne comprends pas encore très bien le responsive et surtout comment déplacer des éléments avec les “medias queries” ou peut-être autre chose justement (c‘est mon premier site…)
j’aimerais que le site mobile ressemble a quelque chose du genre: (le titre en haut, les épisodes au centre et déplacer les images en bas).
vidéo trop cool:
saison 1 saison 2
épisode 1
—--- 2
– 3
ect….
+image à la suiteje vous passe tous mon code pour que vous m'aidiez à mieux comprendre ce que je doit faire pour le rendre responsive, merci d’avance
la page html:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<div class="h1">
<body style="background-color: darkorange;">
<h1 style="color: aquamarine; font-size: 50px; position: absolute; left: 780px; ">vidéo trop cool</h1>
<img style="height: 500px; position: absolute; left: 1400px; bottom: 300px;" src="https://upload.wikimedia.org/wikipedia/en/4/41/South_Park_main_characters.png" alt=" "
</body>
</html>
<p style=" font-size: 35px ;position: absolute; left: 60px; bottom: 710px;color: whitesmoke;">saison 1</p>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 680px; background-color: cadetblue; " href="https://uptostream.com/iframe/7ga0m54n69ks">épisode 1</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 634px; background-color: cadetblue; " href="https://uptostream.com/iframe/5pkqxa9mbmjv">épisode 2</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 588px; background-color: cadetblue; " href="https://uptostream.com/iframe/41gblyzj5z73">épisode 3</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 542px; background-color: cadetblue; " href="https://uptostream.com/iframe/kj8onj8iimoo">épisode 4</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 496px; background-color: cadetblue; " href="https://uptostream.com/iframe/dnwwpmbzs1h8">épisode 5</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 450px; background-color: cadetblue; " href="https://uptostream.com/iframe/peiurdtqxljm">épisode 6</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 404px; background-color: cadetblue; " href="https://uptostream.com/iframe/tckvmhok8mie">épisode 7</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 358px; background-color: cadetblue; " href="https://uptostream.com/iframe/5r12m7lppcvo">épisode 8</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 70px; bottom: 312px; background-color: cadetblue; " href="https://uptostream.com/iframe/k0tkliuqfs78">épisode 9</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 66.5px; bottom: 266px; background-color: cadetblue; " href="https://uptostream.com/iframe/h8c25sdb4f1z">épisode 10</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 66.5px; bottom: 220px; background-color: cadetblue; " href="https://uptostream.com/iframe/sxtbwa9t7y40">épisode 11</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 66.5px; bottom: 174px; background-color: cadetblue; " href="https://uptostream.com/iframe/i4cil1f7x2dm">épisode 12</a>
<a style=" text-decoration: none; color: whitesmoke; border: solid 3px rgb(116, 116, 197); padding: 10px 12px; position: absolute; left: 66.5px; bottom: 128px; background-color: cadetblue; " href="https://uptostream.com/iframe/fvc4c6j96xdr">épisode 13</a>
<p style="font-size: 35px;position: absolute; left: 300px;bottom: 710px; color: chartreuse;">saison 2</p>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 680px; background-color: cadetblue; " href="https://uptostream.com/iframe/y3tfjnqm46e8">épisode 1</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 634px; background-color: cadetblue; " href="https://uptostream.com/iframe/wzzfekrsvz0e">épisode 2</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 588px; background-color: cadetblue; " href="https://uptostream.com/iframe/p615j53b2vr9">épisode 3</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 542px; background-color: cadetblue; " href="https://uptostream.com/iframe/yubc4nes40ll">épisode 4</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 496px; background-color: cadetblue; " href="https://uptostream.com/iframe/oydyw8wosoh8">épisode 5</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 450px; background-color: cadetblue; " href="https://uptostream.com/iframe/8truicqv42i1">épisode 6</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 404px; background-color: cadetblue; " href="https://uptostream.com/iframe/fur5j1ts4dd3">épisode 7</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 358px; background-color: cadetblue; " href="https://uptostream.com/iframe/6yxzfhstzbbk">épisode 8</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 310px; bottom: 312px; background-color: cadetblue; " href="https://uptostream.com/iframe/bk71cc698xdt">épisode 9</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 266px; background-color: cadetblue; " href="https://uptostream.com/iframe/f6arrbmtw6uj">épisode 10</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 220px; background-color: cadetblue; " href="https://uptostream.com/iframe/2s0pmhjfbhqq">épisode 11</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 174px; background-color: cadetblue; " href="https://uptostream.com/iframe/ael54zk779gc">épisode 12</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 128px; background-color: cadetblue; " href="https://uptostream.com/iframe/1te2j8rse6kg">épisode 13</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 82px; background-color: cadetblue; " href="https://uptostream.com/iframe/00knc2tw4e7b">épisode 14</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: 36px; background-color: cadetblue; " href="https://uptostream.com/iframe/nthgnhosqb1g">épisode 15</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: -10px; background-color: cadetblue; " href="https://uptostream.com/iframe/920lla53gtjt">épisode 16</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: -56px; background-color: cadetblue; " href="https://uptostream.com/iframe/yieq84a117co">épisode 17</a>
<a style=" text-decoration: none; color: chartreuse; border: solid 3px whitesmoke; padding: 10px 12px; position: absolute; left: 306.5px; bottom: -102px; background-color: cadetblue; " href="https://uptostream.com/iframe/wu28re7rfyax">épisode 18</a>
et, la page css :
img {
width: 500px;
}
@media only screen and (max-width: 880px) {
img {
width: 380px;
}
}
