Hello tout le monde,

Me voilà dans la dernière ligne droite :-). Un peu de difficultés dans le dernier exercice qui consiste à : 

• Faire disparaître le liseré dans la version mobile
• Afficher verticalement les sections expérience, compétences et formation au lieu de les afficher côte à côte horizontalement.

Voici mon code CSS,

Dans l'attente d'une réponse, je vous souhaite une excellente soirée.

{

    font-family: Georgia, Courier New, Arial, Verdana, sans-serif;

    font-size: 1.3em; /* Police pour toute ma page WEB */

}

div.image

{

     text-align: center;

}

h1

{

    font-size: 30px; /* Titres de 40 pixels */

    text-align: center;

    box-shadow: 2px 3px 2px 3px black;

}

.phrase

{

    font-style: italic;

    font-size: 20px;

    text-align: center;

} 

h3

{

    color: green; /* Couleur pour mes grandes parties */

}

.souligne

{

    text-decoration: underline;

}

#div1

{

    background-image:url("plume3.png"); /* Arrière plan de ma page WEB */

    background-attachment:fixed;

}

.linkedin

{

text-align: center;

font-size: 15px;

} 

@font-face {

    font-family: 'ambleitalic';

    src: url('fronts/Amble-Italic-webfont.eot');

    src: url('fronts/Amble-Italic-webfont.eot?#iefix') format('embedded-opentype'),

         url('fronts/Amble-Italic-webfont.woff2') format('woff2'),

         url('fronts/Amble-Italic-webfont.woff') format('woff'),

         url('fronts/Amble-Italic-webfont.ttf') format('truetype'),

         url('fronts/Amble-Italic-webfont.svg#ambleitalic') format('svg');

    font-weight: normal;

    font-style: normal;

}

body

{

background-image: url("images/neige2.jpg");

}

/* Corps */

#liseret, #contenu

{

    display: inline-block;

    vertical-align: top;

}

#liseret  /* liseret */

{

    width: 10%;

    margin-right: 3%;

    height: 970px;

    background-color: grey;

    border-radius: 10px;

}

#contenu

{

    width: 85%;

}

/* media queries */

 @media all and (max-width: 1024px)

{

    #bloc_page

 {

 width: auto;   

 }

}  

p

    {

        display: flex;

        flex-direction: column;

    } 

-
Edité par AlexandraArias 3 janvier 2019 à 22:29:49

Salut, 

Quand tu poste un nouveau sujet avec du code, pense à utiliser la balise approprié : </> 

tu as simplement à cliquer dessus, coller ton code dedans et sélectionner le langage, cela sera plus facile de lire ;) 

En ce qui concerne tes soucis, peut tu poser ton code html aussi pour voir la structure

L'application du display: flex est bonne mais doit etre appliqué à la div qui englobe tes paragraphes 

https://developer.mozilla.org/fr/docs/Web/CSS/flex-direction

et pour faire disparaître le liseret sur la version mobile, suffit de faire un media queries avec un display none ;) 

GL

AlexandraArias a écrit:

Dans l'attente d'une réponse, je vous souhaite une excellente soirée.

Oui mais non.
Un des buts du cours c'est de trouver la solution toi-même pas de demander une solution toute faite.
D'autant plus qu'il y a plusieurs centaines de posts comme le tien sur le forum avec la solution.
Faire du dev c'est aussi chercher...

Je te mets sur une piste quand même pour la deuxième partie parce que pour la première tu as la réponse.
Avec quelle propriété : valeur tu fais en sorte que les blocs s'alignent horizontalement ?
C'est bon, tu vois ? Alors change la valeur...

Bonjour Frogweb,

Je n'ai en aucun cas demandé la solution! J'ai demandé de l'aide. 

Des personnes ont pu m'aider et je viens de tout valider. 

Cordialement