[media queries] activité 3 OPC : Adapter son CV par LaurentGence - page 1

Hello, je planche sur la dernière activité du module "Apprenez à créer votre site avec HTML5 et CSS3" intitulée "Adapter son cv en responsive.

Les consignes sont les suivantes :

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.

Dans mon cas, je parviens à supprimer le liseré, toutefois s'agissant de mes 3 colonnes, elles se mettent bien au dessous les unes des autres lorsque je réduit la fenêtre, mais le texte qui figure à l'intérieur ne prend pas tout l'espace disponible et "s'écrase" sur le côté en faisant apparaître des barres de défilement horizontales et verticales.

Par ailleurs le rendu de la photo est assez moche quand je réduis la fenêtre, mais je ne vois pas trop quoi faire. La faire passer au dessous du texte du header ?

Je suis certain que mon code est encore très crade, donc n'hésitez pas à me signaler les énormités que vous voyez ; )

Merci d'avance !

Voici mon code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>Online Resume : Spike </title>
    </head>
    
    <body>
        <div id="main">
            
            <div id="lisere">
            </div>
            
            <div id="contenu">
                <header>
                    <h1>Spike, "Spikie", la menace touffue. </h1>
                    <p>Chien de chasse et d'appartement</p>
                    <img src="photo_spikie.jpg" alt="Spike, usant de son autorité naturelle pour convaincre son maître de le nourrir" id="photo_spikie">
                </header>
            
                <div id="colonnes">
                    <section>
                        <h2>Son expérience</h2>
                            <ul>
                                <li>Avril 2017 : naissance. </li>
                                <li>Juin 2017 : arrivée chez ses maîtres. </li>
                                <li> septembre 2017 : première chasse à l'escargot. </li>
                                <li>Janvier 2018 : première tentative (ratée) d'accouplement.</li>
                            </ul>
                    </section>
                    
                    <section>
                        <h2>Ses compétences</h2>
                            <ul>
                                <li>Couiner lorsqu'il a faim, ou bien souhaite effectuer ses besoins à l'extérieur.</li>
                                <li>Mordre les mollets des personnes osant se promener en trotinette au dessus de la vitesse qu'il autorise.</li>
                                <li>Grogner contre les chats. </li>
                                <li>Réveiller son maître à 6h12 du matin.</li>
                                <li>Manger tellement vite qu'il lui arrive de s'étouffer.</li>
                            </ul>
                    </section>
            
                    <section>
                        <h2>Sa formation</h2>
                            <ul>
                                <li>2017 : Chien de chasse, catégorie Chasseur de mites.</li>
                                <li>2017 : Chien d'appartement, option squat de lit. </li>
                                <li>2017 : Chien mignon, catégorie regard implorant.</li>
                               
                            </ul>
                    </section>
                </div>
                
                <footer>
                    <p>B.A.J, tous droits réservés. </p>
                </footer>
            </div>
        </div>
    </body>
</html>

/* Police */

Je vous fais grâce du code des polices : )

/* Principal */

body {   
    background-color: bisque; 
    font-family: 'open_sansregular', Arial, sans-serif; 
}

#lisere {
    max-width: 180px; 
    min-width: 140px; 
    background-color: beige; 
    border-radius: 10px; 
    border: solid brown 2px; 
    height: 100%; 
    background: url('patte.jpg'); 
    background-repeat: repeat-x repeat-y; 
}

#main {
    display: flex; 
    height: 100vh; 
}

#contenu {
    display: flex;
    flex-direction: column; 
    align-items: center; 
}

header {
    min-height: 300px; 
}

#colonnes {
    display: flex; 
    justify-content: center; 
}

section {
    width: 33%;
    overflow: auto;
    padding: 10px;
    margin: 5px; 
    background-color : #FFDAB9; 
}


#photo_spikie {
    width: 190px; 
    height: 190px; 
    position : absolute; 
    top : 5px;
    right: 5px; 
    border: 2px brown solid; 
  
}

h1, h2 {
    color: brown; 
    text-align: center; 
}

li {
    text-align: justify; 
    line-height: 2; 
    color: #8B4513; 
    
}

header p {
    color: chocolate; 
    text-align: center; 
}

p {
    color: maroon; 
    font-weight: bold; 
}

footer {
    position: fixed; 
    bottom: 0; 
    
}


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

{
    #main 
    { 
        width: auto; 
    }
    
    #lisere 
    {
        display: none; 
    }
    
   
    #colonnes 
    {   
        flex-direction: column; 
    }
    
    section
    {   
        width: auto; 
    }
}

-
Edité par LaurentGence 16 mai 2018 à 12:30:11

LaurentGence

16 mai 2018 à 12:28:56

S1ph3L

21 mai 2018 à 8:57:25

Essaie de passer la width de tes sections à 100% dans tes mediaqueries plutôt qu'en auto ?

Peut être préciser également que ta div contenu doit occuper également 100% de l'espace

Pour ce qui est de ton image quel est le problème ?

-
Edité par S1ph3L 21 mai 2018 à 8:59:04

[media queries] activité 3 OPC : Adapter son CV

[media queries] activité 3 OPC : Adapter son CV

Supprimer

Modérer

Signaler le message aux modérateurs