Discussion :

[Pym38]

Bonjour,

Je débute dans le codage et viens de déployer mon site web sur la blockchain Archethic : https://testnet.archethic.net/api/we...881/index.html

Lorsque j'ouvre mon site sur un ordi, le texte de l'en-tête est de la bonne grosseur = 0.8 em et 1em pour le menu. Lorsque j’utilise un simulateur mobile sur le pc, nickel pour la grosseur.

Malheureusement, lorsque j'ouvre le site sur mon tel, le texte de l'en-tête et du menu sont minuscule. Pourquoi? Ainsi que la flèche en bas à droite pour remonter la page...

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
*{
    margin: 0px; /*Ici (margin padding et font-family, nous allons déjà commencer par effectuer un reset des marges intérieures et extérieures des différents éléments de notre page pour nous assurer d’avoir un affichage cohérent d’un navigateur à l’autre. Profitons-en également pour définir une liste de polices d’écriture pour notre page.*/
    padding: 0px;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    color: black;
    scroll-behavior: smooth; /*permet de remonter doucement en cliquant sur le bouton, haut de la page*/
}
/*Pour la suite du menu nav : https://www.pierre-giraud.com/html-css-apprendre-coder-cours/creation-menu-horizontal-sticky/*/
 
body {
    background-color:rgb(255, 255, 255);
}
 
#scrollUp /*bouton pour remonter en haut de la page*/
{
position: fixed;
bottom : 10px;
right: 10px;
opacity: 0.5;
}
 
 
 
header, footer {
    width: 100%;
    background-color: #fff;
    padding: 5px;
    font-size: 0.8em;
    text-align:center;
}
header li, footer li{
    display: inline-block;
    text-decoration: none;
    list-style-type: none; /*Ici, nous allons cibler uniquement la liste de notre menu avec le sélecteur nav ul afin de ne pas enlever les puces des autres listes qui pourraient potentiellement être affichées dans notre page.*/
    color: grey;
    text-align: right;
    padding: 0px 1px;
    vertical-align: middle;
}
header a, footer a{
    display: inline-block;
    text-decoration: none;
    list-style-type: none; /*Ici, nous allons cibler uniquement la liste de notre menu avec le sélecteur nav ul afin de ne pas enlever les puces des autres listes qui pourraient potentiellement être affichées dans notre page.*/
    color: grey;
    text-align: right;
    padding: 0px 15px;
}
 
nav{
    width: 100%; /*largeur 100% du body*/
    background-color: #ffffff;
    margin:0px 0px 30px 0px;
}
nav a{
    display: inline-block;
    text-decoration: none; /*enleve le trait de soulignement*/
    color: black;
    padding: 10px 10px;
    text-align: center;
    font-size: 1em; /*noté 1em avant*/
}
nav ul{
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}
nav li{
    list-style-type: none; /*Ici, nous allons cibler uniquement la liste de notre menu avec le sélecteur nav ul afin de ne pas enlever les puces des autres listes qui pourraient potentiellement être affichées dans notre page.*/
    float: left;
    text-align: left;
}
nav ul::after{
    content: "";
    display: table;
    clear: both;
}
nav a:hover{
    color: green;
    border-top: 5px solid rgb(0, 128, 0);
    background-color: RGBa(0,128,0,0.15);
    padding: 5px 10px 10px 10px;
}
 
main {
    margin: 0px 50px 0px 50px;
    text-align:center;
}
 
h1 {
    color:rgb(0, 128, 0);
    font-size: 2em; /* permet d'avoir une taille de police adapté à l'écran de l'utilisateur */
    font-family:Arial;
    margin:0px 0px 15px 0px;
}
 
h2 {
    color:rgb(0, 128, 0);
    font-size: 1.5em;
    font-family:Arial;
    margin: 0px 0px 15px 0px;
}
 
a {
    color:rgb(0, 128, 0);
    text-decoration:none;
}
 
p {
    color:black;
    font-size:1em;
    font-family:Arial;
    text-align: justify;
}
 
main img {
    padding: 10px;
    border: 1px solid #CCC;
    box-shadow: 0px 0px 17px #BBB;
}
 
#pions{
    width: 100%;
}
 
/* permet de reduire la taille des images lorsque l'on réduit la fenêtre
#jeux{
    width: 30%;
}
*/

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
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Locations</title>
        <link href="styles/styles.css" rel="stylesheet">
    </head>
 
    <body>
        <header>
            <ul>
                <li><a href="index.html"><img src="images/logo_petit.png" alt="Logo Pymsport" ></a></li>
                <li>06.75.88.89.44</a></li>
                <li><a href="mailto:pymsport@gmail.com">pymsport@gmail.com</a></li>
            </ul>
        </header>
 
        <nav>
            <ul>
                <li><a href="index.html">Accueil</a></li>
                <li><a href="animations.html">Animations</a></li>
                <li><a href="location.html">Locations</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
 
        <main>       
            <section id="presentation">
                <h1>Choisissez votre animation</h1>
                <p>Découvrez les <strong>animations</strong> et les <strong>team building</strong> Pymsport : des <strong>Escape Game</strong>, des <strong>jeux sportifs</strong>, des <strong>jeux en bois</strong>, des <strong>jeux de réflexion</strong>... 
                    Des animations adaptées pour entreprises, pour centres de loisirs, pour écoles , pour les particuliers.
                    Vous pourrez choisir entre des jeux d'intérieur ou d'extérieur, des jeux de défis ou de coopération.
                <br>La plupart des jeux sont adaptables pour les enfants.
                <br>Disponible sur <strong>Bourgoin-Jallieu</strong>, <strong>Lyon</strong> et la région <strong>Rhône-Alpes</strong>.
                </p>
                <br><br>
                <img id="jeux" src="images/cohesion.jpg" alt="photo de ski de cohesion">
                <br><br><br><br>
                <article>
                    <h2>Pour les entreprises</h2>
                    <p>Des <strong>team building</strong> pour renforcer votre esprit d'équipe et votre cohésion de groupe. 
                        Partagez une expérience unique entre vos collaborateurs et apprenez à vous connaître par le jeu. 
                        Améliorez la communication et les échanges au sein et entre vos équipes.</p>
                    <br><br>
                    <img src="images/cohesion_2.JPG" alt="photo de jeu de cohesion">
                    <br><br><br><br>
                </article>
 
                <article>
                    <h2>Pour les centres de loisirs, les écoles, les associations et les collectivités</h2>
                    <p>Les animations permettent de développer une dynamique de <strong>coopération</strong> entre les participants et de créer des <strong>liens sociaux</strong> tout en favorisant le "vivre ensemble". 
                        En fonction de vos objectifs et besoins, vous pourrez choisir des activités sportives, créatives ou de réflexion. 
                        Ces activités peuvent se faire en intérieur ou en extérieur. 
                        Les joueurs devront créer, imaginer, s'organiser et trouver des solutions pour faire face aux différentes problématiques rencontrées sur ces jeux.</p>
                    <br><br>
                    <img id="jeux" src="images/jeu_des_templiers.JPG" alt="photo jeu en bois">
                    <br><br><br><br>
                </article>
 
                <arcticle>
                    <h2>Pour les particuliers</h2>
                    <p>Vous recherchez une animation pour l'<strong>anniversaire</strong> de votre enfant? 
                        Pour votre anniversaire? Pour un EVJF ou EVG? Pour un mariage? 
                        Nos animations s'adaptent à votre événement. Nous pouvons aussi vous créer un jeu personnalisé.</p>
                    <br><br>
                    <img id="jeux" src="images/lance.JPG" alt="photo jeu lance en bois">
                    <br><br><br><br>
                </arcticle>
            </section>   
        </main>
<!--bouton pour remonter en haut de la page-->
        <div id="scrollUp">
            <a href="#top"><img src="images/to_top.png"/></a>
            </div>
 
        <footer>
            <ul>
                <li><a href="index.html"><img src="images/logo_petit.png" alt="Logo Pymsport" ></a></li>
                <li>06.75.88.89.44</li>
                <li>38300</li>
                <li>Bourgoin-Jallieu</li>
                <li>Rhône-Alpes</li>
                <li><a href="mailto:pymsport@gmail.com">pymsport@gmail.com</a></li>
                <li>Copyright© 2023</li>
            </ul>
        </footer>
    </body>
</html>

Merci pour votre aide

[mathieu]

rajouter cette ligne dans "head" : <meta name="viewport" content="width=device-width, initial-scale=1.0"/>.
regardez là :
https://developer.mozilla.org/fr/doc...wport_meta_tag

[Pym38]

Merci!! Je teste...

La grosseur de l'en-tête, pied de page et flèche sont nickel.

Par contre mes images ne s'adaptent plus à la taille de l'écran lorsque je tiens mon tel en portrait. En paysage, c'est bon. comme si l'image ne pouvait pas "réduire" de taille.

[NoSmoking]

Bonjour,
normalement ce soucis se règle juste avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
img {
  max-width: 100%;
}