Bonjour,
Je me permets de faire appel à vous car j'ai un petit problème avec la version Edge du site sur lequel je travaille.
J'ai en effet un bloc avec deux colonnes, l'une avec du texte (width:40%), l'autre avec un slider (width:60%) et le tout doit être responsive, d'où l'absence de hauteur définie.
Sous Chrome et Firefox, aucun souci, la hauteur du slider s'adapte à la largeur définie et prend la taille de l'image censée être visible et l'overflow n'apparaît pas ; mais sous Edge, le slider prend la hauteur des images ("wrapped") les unes sur les autres et donc deux images sont visibles à la fois.
J'ai eu beau tester tout ce que je connaissais, me renseigner un peu partout, je n'ai pas réussi à régler mon souci.
Est-ce quelqu'un pourrait m'aiguiller ? Merci d'avance !
Code html : 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 <div class="contain-b"> <div class="row slider"> <div class="left-col text-slider"> <div class="inner">Blablabla</div> </div> <div class="right-col"> <div class="slider-wrapper"> <div class="inner-wrapper"> <div class="slide"><img src="..." alt="" class="image_slider"></div> <div class="slide"><img src="..." alt="" class="image_slider"></div> <div class="slide"><img src="..." alt="" class="image_slider"></div> </div> </div> </div> </div> </div>
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 .contain-b { display:flex; width: 100vw; margin-left: calc(-50vw + 50%); height: auto; justify-content: center; } .slider { display: flex; flex-direction: row; flex-wrap: wrap; width: 80%; justify-content: center; } .left-col { width: 40%; } .right-col { width: 60%; position:relative; } .slider-wrapper { width: 100%; height: 100%; overflow: hidden; } .inner-wrapper { width: 300%; height: 100%; position: relative; left: -100%; } .slide { width: calc(100% / 3); height: auto; float: left; display: flex; justify-content: center; align-items: center; opacity: 1; transition: .5s ease; backface-visibility: hidden; } .image_slider { opacity: 1; display: block; width: 100%; height: auto; transition: .5s ease; backface-visibility: hidden; }
Partager