Non prise en compte des Media Queries

**cfloriot** · 23/05/2016, 17h05

Bonjour,
je vous joins une feuille de style dans laquelle j'ai fait une adaptation avec média queries
la bordure gauche disparait quand on diminue la taille de l'écran,
mais les alignements ne varient pas dans la section, alors que les 3 div (expérience, formation et compétence) devraient passer d'un alignement row
à un alignement column

quelqu'un peut-il m'aider
merci d'avance

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
@font-face {
    font-family: 'robotoregular';
    src: url('../Fonts/Roboto-Regular-webfont.eot');
    src: url('../Fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../Fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../Fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
 
@media all and (max-width: 1024px)
{
    .bordure_gauche
    {
        display: none;
    }
    section
    {
        flex-direction: column;
    }
    .formation
    {
        width:100%;   
    }
    .compétence
    {
        width:100%;   
    }
    .expérience
    {
        width:100%;   
    }
}
.bordure_gauche
{   float: left;
    width: 200px;
    min-width: 0px;
    height: 800px;
    border-radius:10px;
     margin-right: 10px ;
     margin-top: 0px;
    background-color: #3699BA;
}
header
{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: auto;
    height: 135px;
    margin: 0px;
    padding: 0px;
    background-color:#3699BA ;
    border-radius: 10px;
    font-size: 4em;
}
.texte
{
    display: flex;
 
 
    text-align: center;
}
.photo
{
    display:flex;
    align-self: flex-end;
    margin-right:10px ;
    border-radius: 20px;
}
section
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: auto;
    height:800px;
    border-radius: 10px;
    background-image:url("../Images/fond.png");
}
.formation
{
    width:30%;
    height: 600px;
    text-align: justify;
    padding: 15px;
    border-radius: 10px;
 
}
.expérience
{
    width:30%;
    height: 600px;
    text-align: justify;
    padding: 15px;
    border-radius: 10px;
 
}
.compétence
{
    width:30%;
    height: 600px;
    text-align: justify;
    padding: 15px;
    border-radius: 10px;
}    
 
 
 p, ul, li
{
    font-family: 'robotoregular',arial,verdana;
    vertical-align: bottom;
}
h1,h3
{
    font-family: 'robotoregular',arial,verdana;
    text-align: center;
}