Hi everybody i got a problem when i open this page on my pc everything looks ok, it’s also ok with the google responsive mode but when i open this page on my phone the height is not the same for each screenshot of the rendering
capture of my pc
You can also see it at : https://loganthenard.tk/testvid/index
let startX, scrollLeft, isDown = !1;
const slider = document.querySelector(".items"),
end = () => {
isDown = !1, slider.classList.remove("active")
},
start = e => {
isDown = !0, slider.classList.add("active"), startX = e.pageX || e.touches[0].pageX - slider.offsetLeft, scrollLeft = slider.scrollLeft
},
move = e => {
if (!isDown) return;
e.preventDefault();
const t = (e.pageX || e.touches[0].pageX - slider.offsetLeft) - startX;
slider.scrollLeft = scrollLeft - t
};
slider.addEventListener("mousedown", start), slider.addEventListener("touchstart", start, {passive: true}), slider.addEventListener("mousemove", move, {passive: true}), slider.addEventListener("touchmove", move, {passive: true}), slider.addEventListener("mouseleave", end, {passive: true}), slider.addEventListener("mouseup", end, {passive: true}), slider.addEventListener("touchend", end, {passive: true});.wrapper-comment {
position: relative;
display: flex;
align-items: center;
padding: 25px 0;
background-color: white;
flex-direction: column;
align-content: center;
justify-content: center;
}
.items {
position: relative;
width: 100%;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
height: 250px;
}
.items.active {
cursor: grab;
}
.item {
display: inline-block;
margin-left: 15px;
user-select: none;
width: 50%;
min-width: 225px;
height: 250px;
color: #000;
font-weight: bold;
}
.item p {
margin: 15px 10px;
font-size: 15px;
white-space: pre-line;
}
.item:last-child {
margin-right: 20px;
}
@media screen and (max-width: 400px) {
.slide-text {
font-size: 0.7em;
}
}
@media screen and (min-width: 500px) {
.item {
width: 33%;
}
.slide-text {
font-size: 1.5em;
}
}
@media screen and (min-width: 800px) {
.item {
width: 25%;
}
}
@media screen and (min-width: 1200px) {
.wrapper-comment {
margin-left: -20px;
padding: 25px 100px;
}
.item {
width: 20%;
}
.slide-text {
margin-left: 30px !important;
}
}
@media screen and (max-width:1200px) {
.item p {
font-size: 12px;
}
}
legend {
font-size: 15px;
margin-left: 10px;
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
font-weight: 100;
}
.slide-text {
text-transform: uppercase;
white-space: nowrap;
margin-left: 10px;
}
hr {
border: 1px solid #000;
}
.star-rate {
display: flex;
justify-content: center;
}
.star-rate img {
width: 20px;
margin-top: 10px;
} <div class="wrapper-comment">
<div class="slide-text">
<h3>Les avis de</h3>
<hr>
<h3>Nos clients</h3>
</div>
<div class="items">
<fieldset class="item">
<legend>Ashley</legend>
<div class="star-rate"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20"
height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> </div>
<p>Jemsky est un éducateur sportif très agréable, à l'écoute et très pédagogue. Il a su adapté le cours a mon niveau, c'est exactement ce que je recherchais. Je recommande fortement ce coach.</p>
</fieldset>
<fieldset class="item">
<legend>Pénélope</legend>
<div class="star-rate"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20"
height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> </div>
<p>Très bon coach! Nous avons demandé à Jemsky de faire un cours de sport dans notre entreprise. L'expérience à été parfaitement réussi et les collaborateurs étaient ravis! Je recommande vivement.</p>
</fieldset>
<fieldset class="item">
<legend>Hoai Anh</legend>
<div class="star-rate"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20"
height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> </div>
<p>J'ai bien aimé le cours</p>
</fieldset>
<fieldset class="item">
<legend>Vincent</legend>
<div class="star-rate"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20"
height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> </div>
<p>Jemsky à été mon coach pendant 1 ans, malheureusement suite à mon déménagement on a dû arrêter, mais je me suis jamais senti aussi bien que pendant ses 1 an avec mon coach. En plus des résultats, il a réussi à me redonner confiance en moi via le sport et la motivation, et surtout le sourire et la bonne humeur à chaques séances. Merci Coach</p>
</fieldset>
<fieldset class="item">
<legend>Maimouna</legend>
<div class="star-rate"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> <img src="img/star-solid.svg" width="20"
height="20" alt="star"> <img src="img/star-solid.svg" width="20" height="20" alt="star"> </div>
<p>Très professionnel et à l'écoute, je suis très contante d'avoir fait une séance avec Jemsky. Je le recommande vivement.</p>
</fieldset>
</div>