1485 sujets

Web Mobile et responsive web design

[Résolu] Afficher un <header> sur 1 ou 2 lignes en fonction de l

Bonjour,

Je suis en train de faire mon CV à la main en HTML + CSS sans JS. Je veux qu'il soit responsive et que le bloc header s'adapte donc à la largeur d'affichage.

Mon header ressemble actuellement à ça :
        <header>
            <div class="titre">
                <h1>Nom + prénom</h1>
                <h2>Ingénieur d'études et développement</h2>
            </div>
            <div class="photo-identite">
                <figure>
                    <img src="image/maphoto.png" alt="nom+prenom" />
                    <figcaption>47 ans</figcaption>
                </figure>
            </div>
            <div class="addess">
                <address>
                    <img src="image/email.png"> <a href="mailto:moi@tld.fr">moi@tld.fr</a><br>
                    <img src="image/telephon.png"> <a href="tel:+33699999999">06 99 99 99 99</a><br>
                    <img src="image/localisation.png"> maville (FR)
                </address>
            </div>
        </header>


La partie CSS correspondante :
header>div{
    /* Largeur */
    width: auto;
    max-width: 100%;
    
    /* Marges intérieures*/
    padding-left: 1ex;
    
    /* Marges */
    margin-left: 1ex;
    margin-right: 1ex;
}
header>div .photo-identite{
    /* Flexbox - entête */
    width: auto;
    min-width: 15%;
    max-width: 100%;
    
    /* Fond */
    
    /* Texte */
    text-align: center;
    
}
header>div>figure>img
header>div>address{
    /* Flexbox - entête */
    width: auto;
    min-width: 40%;
    max-width: 100%;

    /* Bordures */
    border-radius: 5px / 5px;
}
header>div>address>img{
    /* Redimensionnement de l'image en conservant les proportions */
    width: 1.2em;
    height: auto;
    vertical-align: middle;     /* On centre le texte verticalement sur l'image */
}


Je n'arrive pas à faire en sorte que ce header s'adapte à la largeur d'affichage. Dans ma tête, je cherche à faire en sorte que si tout ne peut pas tenir sur une seule ligne, alors la photo et mes coordonnées passent sur une 2ème ligne.

Avez-vous une idée ?
Bon ben, j'ai trouvé, alors je me répond à moi-même au cas où ça pourrait en aider d'autres ...

Il m'a suffit d'ajouter un flex-wrap: wrap dans la feuille de style.

header{
    /* Flexbox */
    align-items: stretch;       /* On étale le header pour qu'il prennent toute la largeur de la fenêtre */
    /* Flexbox CSS pour l'entête seul*/
    width: 100%;
    display: flex;
    flex-wrap: wrap;        /* On passe à la ligne lorsqu'on a plus assez de place */
    justify-content: center;
    align-items: center;
}
Meilleure solution
Sujet clos
Aller à