Probléme responsive design par ZainebLouihi - page 1

Bonjour, alors ça fait des jours et des jours que je me suis bloquer et dans le dernier exercice, les medias queries sont ignorés.

Voila mon code HTML

<!DOCTYPE html>
<html>
    <head> 
       <meta charset="utf-8" />
       <link rel="stylesheet" href="stylee.css" /> 
       <title>Zaineb LOUIHI</title>
    </head>
    <body>
    	<div class="liseret">
    		
    	</div>
    	<div class="contenu">
    		<header>
    			<div class="header">
                    <h1>Zaineb LOUIHI</h1>
                    <h3>Etudiante</h3>
                    <a href="images/Photo.jpg"><img src="images/Photo1-mini.jpg" alt="Photo" class="image" /></a>
    		</header>
            <section>
                <div class="cv">
                    <div class="experiences"><h2>Mon expérience</h2></p>
                         <ul>
                              <li><p class="date"><strong>01/07/2016 - 31/07/2016</strong></p> Grands Moulins d’Ouarzazate, Technicienne maintenance</li>
                              <li><p class="date"><strong>10/05/2017 - 23/6/2017</strong></p> Sté Valeur Sud BTP, Assistante administrative</li>
                         </ul>
                    </div>
                    <div class="competences">
                         <h2>Mes compétences</h2>
                             <ul> 
                                <li><strong>Techniques</strong> : Traitement du signal, Asservissement, Modulation analogique et numérique, Réalisation des cartes électroniques, Bus CAN ,I2C ,RS232 ....</li>
                                <li><strong>Bureautique</strong> : Word, Excel, Powerpoint…</li>
                                <li><strong>HTML5 et CSS3</strong>(Certificat OpenClassrooms)</li>
                                <li><strong>Logiciels</strong> : ARES, ISIS, MatLab, Workbench, Arduino...</li>
                             </ul>
                    </div>
                    <div class="formation">
                         <h2>Ma formation</h2>
                             <p>J'ai tout appris sur OpenClassrooms.....c'est simple !</p>
                    </div>
                </div>
            </section>
    	</div>
    </body>
</html>

et le CSS

h1,h3
{
	text-align: center;
	color: #9E0303;
}
h3
{
	text-decoration: underline;
	font-style: italic;
}
h1
{
	font-size: xx-large;
}
h2
{
	font-family: Georgia;
	color: navy;
	font-style: italic;
}
.image
{
	position: absolute;
	right: 1%;
	top: 1%
}
body
{
	background-image: url("images/background-grey.jpg");
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.liseret
{
    background-color: grey;
	height: 600px;
	width: 10%;
	border-radius: 20px;
}
.contenu
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}
.cv
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
}
.competences, .formation, .experiences
{
	width: 30%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2%;
}

@media screen and (max-width: 1024px)
{
	.liseret
	{
		display: none;
	}
	.cv
	{
		flex-direction: column;
	}
}

Si vous pouvez m'aider et me donner des propositions,Merci.

Probléme responsive design

Probléme responsive design

Supprimer

Modérer

Signaler le message aux modérateurs