Bonjour,

Je me permet de venir vers vous parceque j'ai un petit soucis pour le TP ou il faut passer notre cv en ligne en responsive.

Pour l'exercice, il faut que le liseré de gauche disparaisse quand on réduit la taille de l'écran et que les trois catégories du cv passent de ligne à colonne (l'une en dessous de l'autre).

Pour ce qui est du liseré, pas de soucis, il disparaît bien lorsque je réduit la taille de l'écran.

Par contre les catégories (expériences, compétences, formations), restent en ligne.

Si quelqu'un avez une idée d'ou ça peut venir.

Merci d'avance.

-
Edité par Julien Dcs 15 octobre 2018 à 10:58:59

Salut,

il faut que tu annule, ou plutôt que tu change la valeur de la propriété qui aligne les catégories.

Et les lignes 127 à 143 ne servent à rien.

-
Edité par Frogweb 15 octobre 2018 à 11:17:21

Bonjour,

Attention à ton code également.Tu essayes d'appliquer un display flex sur toutes tes balises section mais je ne vois aucune section dans ton HTML... 

-
Edité par Mewen_bzh 15 octobre 2018 à 11:29:14

Salut, 

merci de prendre du temps pour répondre.

Dans mon CSS, j'ai supprimé les lignes 127 à 143, comme tu me l'as dit.

J'ai rajouté dans mon html les balises <section>.....</section> (que j'avais due enlever au cours de mes essais), pour que le css puisse appliquer le display:flex et le flex-direction: column à mon cv lors de la réduction de la taille de la page.

Cependant, les colonnes restent les unes à côté des autres au lieu de passer les unes en dessous des autres.

Du coup je me demande, qu'entends tu part changer la valeur de la propriété qui les aligne.

Le code css qui les alignes en page "normale" est le suivant

-
Edité par Julien Dcs 15 octobre 2018 à 11:36:05

C'est display:flex sur section qui fait que les catégories s'alignent.
Il faut donc changer dans les media-queries la valeur de display.

Quelle est par défaut la valeur du display d'un bloc ? (la réponse est dans la question...).

Et enlève tout ces position:absolute et inline-block... Laisse seulement ce qu'il y a sur .sidebar

-
Edité par Frogweb 15 octobre 2018 à 11:50:35

Par défaut, les blocs se placent les uns en dessous des autres.

C'est pour ça que sur la page de taille "normale" j'utilise un display:flex; et un flex-direction:row;  pour qu'ils s'alignent.

Et donc dans les @media que j'utilise un flex-direction: column;

Tu te complique la vie...

<section>
    <div class="skill"></div>
    <div class="skill"></div>
    <div class="skill"></div>
</section>

section {
    display:flex;
}
.skill {
    border:1px solid #333;
    height:100px;
    width:33.3333%
}
@media all and (max-width:1027px) {
    section {
        display:block;
    }
    .skill {
        width:auto;
    }
}

Ok, ça marche.

Je vais essayer en suivant ta méthode voir ce que cela me donne.

Merci

édit :

Je progresse. Lentement mais je progresse.

En utilisant ta méthode, les blocs passent bien en dessous les uns des autres, mais ils se chevauchent.

Ca va finir par devenir bon..... j'espère

édit 2:

Je sais pas si la méthode que je viens d'utiliser est la bonne ou la plus simple, mais j'ai réussi à obtenir le résultat souhaité.

Encore merci pour l'aide.

-
Edité par Julien Dcs 15 octobre 2018 à 15:06:33