1448 sujets

Web Mobile et responsive web design

Bonjour,
j'ai besoin de votre aide !

Je dois concevoir un site pour mon examen, j'ai donc plusieurs pages dont une qui s'appelle "Presentation". Dans laquelle, j'aimerais que mon texte se mettent en dessous de l'image et de la vidéo lorsque la taille de l'écran diminue. Qui s'adapte également à l'écran de téléphone.
J'ai cherché pendant un moment et essayé plusieurs choses mais je n'ai pas trouvé la solution.

C'est donc pour ça que j'ai besoin de vous Smiley cligne

Merci d'avance à ceux qui m'aideront !! <3
/* flexbox */
html{
    display: flex;
}
body{
    display: flex;
    flex-wrap: wrap;
    background-color: #5299E3;
    font-family: Arial, sans-serif;
    font-size: 100%;
}
header, nav, .content, footer{
    display: flex;
    padding: 3px;
    margin: 5px;
    border-radius: 10px;
    background-color: skyblue;
    flex-basis: 100%;
}
header{
    flex-direction: row;
    justify-content: space-between;
}
nav{
    justify-content: space-around;
    flex-wrap: wrap;
    padding-top: 1.2em;
    padding-bottom: 1.2em;
}
content{
    flex: auto;
    flex-wrap: wrap;
}
footer{
    padding: 10px;
}
/* balise perso */
.logo{
    width: 15%;
}
.boutondeco{
    font-size: 1em;
    background-color:#54AAFF;
    border-color: #54AAFF;
    border-radius: 30px 30px 30px 30px;
    color: white;
}
.bouton{
    text-align: right;
}
.connecter{
    font-size: 1em;
    background-color:#54AAFF;
    border-color: #54AAFF;
    border-radius: 30px 30px 30px 30px;
}
.icon{
    display: flex;
    justify-content: space-around;
}
.carte{
    text-align: center;
}
.soulignement{
    text-decoration: underline;
    text-decoration-style: double;
}
.formulaire{
    padding: 1em;
}
.img-respensive{
    max-width: 100%;
    height: auto;
    display: block;
}
/* Balise */
ul{  
    list-style:linear-gradient(to left bottom, #F5ABF7, #4D99FF);
    color: #066DF9;
}
Strong{
    font-size: 1.5em;
    color: #2F51ED;
    text-transform: uppercase;
}
img{
    border-radius: 20px;
}
video{
    border-radius: 20px;
    max-width: 100%;
    height: auto;
    display: block;
}
h1{
    text-align: center;
    text-decoration: underline;
    text-shadow: 0px 0px 10px blue;
    text-transform : uppercase;
    color: white;
}
h2{
    text-align: center;
    color: white;
    text-shadow: 0px -1px 11px rgba(159, 108, 255, 1);
}
h3{
    color: white;
}
h4{
    color: white;
    font-size: 1.3em;
    text-align: justify;
}
/* taille texte */
@media screen and (max-width: 60em){
    h1{
        font-size: 1.5em;
    }
}
@media screen and (max-width: 50em) {
h1 {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 30em){
h1 {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 60em){
    h2{
        font-size: 1.5em;
    }
}
@media screen and (max-width: 50em) {
h2 {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 30em){
h2 {
    font-size: 0.9em;
  }
}
@media screen and (max-width: 64em){
    h3{
        font-size: 1.5em;
    }
}
@media screen and (max-width: 50em) {
h3 {
    font-size: 1.2em;
  }
}

@media screen and (max-width: 30em){
h3 {
    font-size: 0.9em;
  }
}

@media screen and (max-width: 64em){
    h4{
        font-size: 1em;
    }
}
@media screen and (max-width: 50em) {
h4 {
    font-size: 1em;
  }
}

@media screen and (max-width: 30em){
h4 {
    font-size: 0.9em;
  }
}
/* liens */
a, a:hover, a:visited{
    text-decoration: none;
    color: white; 
}



<!DOCTYPE html>
<html>
    <head>
        <title>Acceuil</title>
        <meta charset="utf-8">
        <!--taille text-->
		<style type="text/css">
			@media screen and (min-width:1024px) {
				p+p {display: none;}
			}
			@media screen and (max-width:1024px) {
    			p:first-child {display: none;}
			}			
		</style>
        <!--fin-->
        <!--telephone-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--bootstrap-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="shortcut icon" href="images/logo.png">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <img class="logo" src="images/logoetnom.png" alt="logo et nom">
                        
            <form>
                <div><button type="submit" class="connecter"><a class="boutondeco" href="Connection.html">Se connecter</a></button></div>
            </form> 
        </header>
        
        <nav>
            <a href="Accueil.html">Acceuil</a>
            <Strong>Présentation</Strong>
            <a href="Modele.html">Modèles</a>
        </nav>
        
        <div class="content">
            
            <div class="col justify-content-md">
                <div class="col col-lg">
                    <h1>Pourquoi choisir nos portes ?</h1>
                </div>
               
                <div class="col col-lg">
                    <h2>Parce qu'elles sont les meilleurs qualités-prix !<br> Ce sont également les plus sécurisés.</h2><br>
                </div>
                
                <div class="col col-lg">
                    <h3>Nos portes disposent d'un système de <span class="soulignement">reconnaissance faciale</span> et d'<span class="soulignement">identification</span> qui permettent de détecter :</h3>
                </div>
                
                <div class="col col-lg">
                    <ul>
                        <li>Si des individus sont à moins d’un mètre de celle-ci.<br> Elle enverra une notification d’avertissement au propriétaire. Il pourra donc regarder ce qu’il se passe en direct.</li>
                        <li>Si un individu essaye de forcer la porte, elle contactera les forces de l’ordre en leur envoyant une photo de la personne et enverra un message au propriétaire.<br> Ceux-ci pourront également regarder ce qu’il se passe en direct.</li>
                    </ul>
                </div>
                
                <div class="col col-lg">
                     <h3>Elles disposent également de plusieurs options :</h3>
                </div>
                
                <div class="col col-lg">
                    <ul>
                        <li>Caméra de surveillance</li>
                        <li>Historique des individus détecter (vidéo et photo du visage)</li>
                        <li>Ouverture et fermeture grâce au smartphone</li>
                        <li>Ouverture automatique de la porte.<br> Celle-ci pourrra identifier votre plaque d'immatriculation et pourra donc ouvrir la porte lorsque votre véhicule sera à 3m de la porte.</li>
                        <li>Capteur qui vérifie si il n'y a rien en dessous de celle-ci.<br>Elle s'arrêtera à 30cm de l'objet ou de la personnes.</li>
                    </ul>
                </div>
                
                <div class="col col-lg">
                    <h3>
                        Elles sera aussi équipé d'un système anti-suicide :
                    </h3>
                </div>
                
                <div class="col col-lg">
                    <ul>
                        <li>Lorsque la porte détectera une masse accroché à la porte, celle-ci se refermera immédiatement.</li>
                        <li>Elle pourra détecter le taux de gaz (CO2, ...) dans le garage. La porte ouvrira automatique des trappes d'air qui permettront l'aération du garage.</li>
                    </ul>
                </div>
            </div> 
        </div>
        
        <footer class="icon">
            <a href="https://www.facebook.com/Porsecu-106066048767413/"><img width="75px" src="images/facebook.jpg" alt="icone facebook"></a>
            <a href="https://www.instagram.com/invites/contact/?i=opsrxvlmu55v&utm_content=nkfx343">
            <img width="75px" src="images/instagram.jpg" alt="icone facebook">
            </a>
            <a href="https://twitter.com/porsecu1"><img width="75px" src="images/twitter.jpg" alt="icone facebook"></a>
        </footer>
  </body>
</html>
Bonjour,

pourquoi déjà il y a autant de display:flex; ? Sur le html, sur le body, sur le header, nav, .content, .icon, footer... Tu peux en virer plusieurs. Un seul container en flex, qui peut être body, devrait faire l'affaire. Pour les h1, ils devraient s'adapter sans remettre autant de @media. À partir du moment où tu utilises des valeurs fluides en em, ça devrait passer. Le site s'affiche bien, y compris en version mobile, mais il y a du nettoyage à faire dans le code inutile.

Pour ta question au sujet de l'image et la vidéo, je ne les vois pas apparaître sur l'essai que j'ai réalisé. Smiley decu
J'ai reproduis à peu prêt le code : CodePen

...mais je ne comprends pas quel texte doit passer au dessous de quelle image. Et cette vidéo elle est où ?
Olivier C a écrit :
J'ai reproduis à peu prêt le code : CodePen

...mais je ne comprends pas quel texte doit passer au dessous de quelle image. Et cette vidéo elle est où ?

Désolé je me suis trompé de page ... Smiley sweatdrop

<!DOCTYPE html>
<html>
    <head>
        <title>Acceuil</title>
        <meta charset="utf-8">
        <!--taille text-->
		<style type="text/css">
			@media screen and (min-width:1024px) {
				p+p {display: none;}
			}
			@media screen and (max-width:1024px) {
    			p:first-child {display: none;}
			}			
		</style>
        <!--fin-->
        <!--telephone-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--bootstrap-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="shortcut icon" href="images/logo.png">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <img class="logo" src="images/logoetnom.png" alt="logo et nom">
                        
            <form>
                <div><button type="submit" class="connecter"><a class="boutondeco" href="Connection.html">Se connecter</a></button></div>
            </form> 
        </header>

        <nav>
            <a href="Accueil.html">Acceuil</a>
            <a href="Presentation.html">Présentation</a>
            <strong>Modèles</strong>
        </nav>
        
        <div class="content">
            <div class="col justify-content-md">
                <div class="row row-cols-4">
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte1.jpg" alt="porte de garage numero 1">
                        
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                           <source class="img-respensive" src="images/video_porte.webm" type=video/webm>
                        </video>
                    </div>
                    <div class="col-6">
                        <h4>Les portes sectionnelles s’ouvrent à la verticale et se positionnent sans encombrement sous le plafond. Grâce à ce principe de construction, elles offrent un espace de stationnement maximal, aussi bien dans que devant le garage. Les portes de garage sectionnelles s’adaptent à toutes les baies et offrent jusqu’à 14 cm supplémentaires de passage libre que les portes basculantes. En outre, elles sont parfaitement étanches grâce aux joints à élasticité durable et résistants aux intempéries montés sur les quatre côtés.</h4>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col-6">
                        <h4>Les portes basculantes Berry allient une qualité haut de gamme et une technique avancée à un fonctionnement durable et une commande sûre. Les portes basculantes Berry sont disponibles dans de nombreux motifs séduisants en acier à rainures ou cassettes, ainsi qu’en bois. Les couleurs et les surfaces décoratives apportent des touches supplémentaires.</h4>
                    </div>
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte2.jpg" alt="porte de garage numero 2">
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte2.webm" type=video/webm>
                        </video>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col">
                       <img class="img-respensive" src="images/porte3.jpg" alt="porte de garage numéro 3">
                    </div>
                    <div class="col"> 
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte3.webm" type=video/webm>
                        </video>
                    </div>
                    <div class="col-6">
                        <h4>Les portes de garage enroulables RollMatic s’ouvrent à la verticale et ne nécessitent qu’une place minime dans le garage : grâce à leur principe de construction, elles offrent un espace de stationnement maximal, aussi bien dans que devant le garage.</h4>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col-6">
                        <h4>La porte sectionnelle latérale est conçue pour s’adapter aux situations de montage les plus complexes, par exemple en cas d’inclinaison du plafond. La hauteur de passage libre reste entièrement disponible. Ses panneaux sandwich de 42 mm d’épaisseur injectés de mousse
                            polyuréthane offrent une isolation acoustique et thermique optimale. De plus, la porte sectionnelle latérale peut être partiellement ouverte pour un accès piétons aisé.</h4>
                    </div>
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte4.jpg" alt="porte de garage numéro 4">
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte4.webm" type=video/webm>
                    </video>
                    </div>
                </div>
            </div> 
        </div>
        
        <footer class="icon">
            <a href="https://www.facebook.com/Porsecu-106066048767413/"><img width="75px" src="images/facebook.jpg" alt="icone facebook"></a>
            <a href="https://www.instagram.com/invites/contact/?i=opsrxvlmu55v&utm_content=nkfx343">
            <img width="75px" src="images/instagram.jpg" alt="icone facebook">
            </a>
            <a href="https://twitter.com/porsecu1"><img width="75px" src="images/twitter.jpg" alt="icone facebook"></a>
        </footer>
  </body>
</html>
Bongota a écrit :
Bonjour,

pourquoi déjà il y a autant de display:flex; ? Sur le html, sur le body, sur le header, nav, .content, .icon, footer... Tu peux en virer plusieurs. Un seul container en flex, qui peut être body, devrait faire l'affaire. Pour les h1, ils devraient s'adapter sans remettre autant de @media. À partir du moment où tu utilises des valeurs fluides en em, ça devrait passer. Le site s'affiche bien, y compris en version mobile, mais il y a du nettoyage à faire dans le code inutile.

Pour ta question au sujet de l'image et la vidéo, je ne les vois pas apparaître sur l'essai que j'ai réalisé. Smiley decu

Merci des conseils ! Désolé je perd un peu la tête Smiley sweatdrop
Je m'étais tromper de code le voici :
<!DOCTYPE html>
<html>
    <head>
        <title>Modèles</title>
        <meta charset="utf-8">
        <!--taille text-->
		<style type="text/css">
			@media screen and (min-width:1024px) {
				p+p {display: none;}
			}
			@media screen and (max-width:1024px) {
    			p:first-child {display: none;}
			}			
		</style>
        <!--fin-->
        <!--telephone-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--bootstrap-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <link rel="shortcut icon" href="images/logo.png">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <img class="logo" src="images/logoetnom.png" alt="logo et nom">
                        
            <form>
                <div><button type="submit" class="connecter"><a class="boutondeco" href="Connection.html">Se connecter</a></button></div>
            </form> 
        </header>

        <nav>
            <a href="Accueil.html">Acceuil</a>
            <a href="Presentation.html">Présentation</a>
            <strong>Modèles</strong>
        </nav>
        
        <div class="content">
            <div class="col justify-content-md">
                <div class="row row-cols-4">
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte1.jpg" alt="porte de garage numero 1">
                        
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                           <source class="img-respensive" src="images/video_porte.webm" type=video/webm>
                        </video>
                    </div>
                    <div class="col-6">
                        <h4>Les portes sectionnelles s’ouvrent à la verticale et se positionnent sans encombrement sous le plafond. Grâce à ce principe de construction, elles offrent un espace de stationnement maximal, aussi bien dans que devant le garage. Les portes de garage sectionnelles s’adaptent à toutes les baies et offrent jusqu’à 14 cm supplémentaires de passage libre que les portes basculantes. En outre, elles sont parfaitement étanches grâce aux joints à élasticité durable et résistants aux intempéries montés sur les quatre côtés.</h4>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col-6">
                        <h4>Les portes basculantes Berry allient une qualité haut de gamme et une technique avancée à un fonctionnement durable et une commande sûre. Les portes basculantes Berry sont disponibles dans de nombreux motifs séduisants en acier à rainures ou cassettes, ainsi qu’en bois. Les couleurs et les surfaces décoratives apportent des touches supplémentaires.</h4>
                    </div>
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte2.jpg" alt="porte de garage numero 2">
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte2.webm" type=video/webm>
                        </video>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col">
                       <img class="img-respensive" src="images/porte3.jpg" alt="porte de garage numéro 3">
                    </div>
                    <div class="col"> 
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte3.webm" type=video/webm>
                        </video>
                    </div>
                    <div class="col-6">
                        <h4>Les portes de garage enroulables RollMatic s’ouvrent à la verticale et ne nécessitent qu’une place minime dans le garage : grâce à leur principe de construction, elles offrent un espace de stationnement maximal, aussi bien dans que devant le garage.</h4>
                    </div>
                </div>
                
                <div class="row row-cols-4">
                    <div class="col-6">
                        <h4>La porte sectionnelle latérale est conçue pour s’adapter aux situations de montage les plus complexes, par exemple en cas d’inclinaison du plafond. La hauteur de passage libre reste entièrement disponible. Ses panneaux sandwich de 42 mm d’épaisseur injectés de mousse
                            polyuréthane offrent une isolation acoustique et thermique optimale. De plus, la porte sectionnelle latérale peut être partiellement ouverte pour un accès piétons aisé.</h4>
                    </div>
                    <div class="col"> 
                        <img class="img-respensive" src="images/Porte4.jpg" alt="porte de garage numéro 4">
                    </div>
                    <div class="col">
                        <video width="320" height="240" controls>
                        <source class="img-respensive" src="images/video_porte4.webm" type=video/webm>
                    </video>
                    </div>
                </div>
            </div> 
        </div>
        
        <footer class="icon">
            <a href="https://www.facebook.com/Porsecu-106066048767413/"><img width="75px" src="images/facebook.jpg" alt="icone facebook"></a>
            <a href="https://www.instagram.com/invites/contact/?i=opsrxvlmu55v&utm_content=nkfx343">
            <img width="75px" src="images/instagram.jpg" alt="icone facebook">
            </a>
            <a href="https://twitter.com/porsecu1"><img width="75px" src="images/twitter.jpg" alt="icone facebook"></a>
        </footer>
  </body>
</html>