[Résolu] Une espace non désirée en mode mobile

Bonjour,
j'ai un slider avec des images en mode cover

.lddc .bg-img
{
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100vh !important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	background-color: black;
}

Aucun problème à signaler en mode écran, mais une espace de quelques pixels (15 ?) se trouve sous la cover en mode mobile, laissant apparaître la div suivante.
Les Media queries me sembles correctes

@media only screen and (max-width: 575px)
{
	.lddc .bg-img-1
	{
		background-image: url('../images/640w/PBal.jpg');
	}
}

@media only screen and (min-width: 576px) and (max-width: 768px)
{
	.lddc .bg-img-1
	{
		background-image: url('../images/960w/PBal.jpg');
	}
}

@media only screen and (min-width: 769px) and (max-width: 1920px)
{
	.lddc .bg-img-1
	{
		background-image: url('../images/1920w/PBal.jpg');
	}
}

@media only screen and (min-width: 1921px)
{
	.lddc .bg-img-1
	{
		background-image: url('../images/PBal.jpg');
	}
}

et le slider en cause

<div class="sl-slide" data-orientation="vertical">
	<div class="sl-slide-inner">
		<div class="bg-img bg-img-2">
			<video autoplay loop muted="" playsinline="">
				<source src="./videos/lddcintro.webm"type="videos/webm">
					<source src="./videos/lddcintro.mp4"type="video/mp4"></video>
				</div>
				<div class="marquee-rtl">
					<!-- le contenu défilant -->
					<h3>  PRESENTE</h3>
				</div>
			</div>
		</div>

Je pense avoir tout vérifié... (?)

Merci beaucoup et bonnes fêtes de fin d'années.
P.

Hello,

De tête, l'élément <video>, comme <img> est un élément de type inline(-block) et se pose comme le reste du texte sur la "baseline". Cela signifie qu'il laisse toujours de l'espace en bas pour les jambages du texte.

Si mon hypothèse est bonne, tu as l'explication détaillée ainsi que la solution dans ce très vieil article : https://www.alsacreations.com/astuce/lire/52-espaces-sous-les-images.html

Ensuite, concernant tes media queries, elles semblent bonnes mais connaîs-tu image-set() ? Je pense que ça te facilitera énormément la tâche :
https://css-tricks.com/using-performant-next-gen-images-in-css-with-image-set/

Bon dimanche !

salut
essaie un margin: 0 sur ton élément en cause.

Bonjour Raphael, bonjour drphilgood,
merci pour vos réponses
Les margin, display et le vertical-align ne sont pas en cause , même si mon souci ressemble étrangement au lien Alsa envoyé par Raphael.
Mon problème apparaît uniquement en mode mobile. J'ai tenté des margin-top plus que positif pour voir, le slider descend bien mais la marge (espace entre le slider et le bas de la fenêtre est toujours là ).
Encore merci pour vos réponses, bonne fin de week-end,
P.
Modifié par PLGPPUR (29 Dec 2024 - 21:53)

Hello.

Dans ce cas, il doit y avoir une interférence avec une autre partie de ta page, mais c'est difficile de deviner sans y avoir accès

Bonjour,

Les codes que tu montre sont incomplets pour se faire une idée ou reproduire ton défaut.

* Pas de class lddc dans ton morceau HTML ni le css qui lui est appliqué. Est ce un parent positionné, dimensionné et un overflow:hidden, ... autre ?
* Un positionement en absolu sans coordonnées (top,left,right,bottom ou inset)

Sur mobile, il y a aussi l'unité dvh qui est intéressante bien que cela ne semble pas être ton soucis :
https://www.alsacreations.com/astuce/lire/1831-corriger-le-probleme-de-hauteur-100vh-sur-mobile.html

Cdt

Bonjour Raphael et gcyrillus ( )
le "lddc" n'a rien à faire là. désolé de ne pas avoir fait le ménage avant d'avoir lancer la discussion, c'est tout moi
Ne sachant plus où mettre le pied, je vous mets toutes les CSS su slider concerné (l'espace de 10px (?) se trouve sous le slider.

#slider
{
	margin: 0;
	height: 100vh;
}

.sl-slider-wrapper
{
	width: 100%;
	overflow: hidden;
	position: relative;
	left: 0px;
	margin: 0px;
	top: 10px;
	bottom: 0px;
	right: 0px;
}

.sl-slider
{
	position: absolute;
	left: 0;
	top: 0px;
	height: 100vh !important;
	background-color: #000000;
	text-align: center;
}

/* Slide wrapper and slides */
.sl-slide,.sl-slides-wrapper,.sl-slide-inner
{
	position: absolute;
	width: 100%;
	height: 100vh !important;
	left: 0;
}

.sl-slide
{
	z-index: 1;
}

/* The duplicate parts/slices */
.sl-content-slice
{
	overflow: hidden;
	position: absolute;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	background-color: #000000;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	opacity : 1;
}

/* Vertical slice */
.sl-slide-vertical .sl-content-slice
{
	width: 50%;
	height: 100%;
	top: -200px;
	-webkit-transform: translateX(0%) scale(1);
	-moz-transform: translateX(0%) scale(1);
	-o-transform: translateX(0%) scale(1);
	-ms-transform: translateX(0%) scale(1);
	transform: translateX(0%) scale(1);
}

.sl-slide-vertical .sl-content-slice:first-child
{
	left: -200px;
	padding: 200px 0px 200px 200px;
}

.sl-slide-vertical .sl-content-slice:nth-child(2)
{
	left: 50%;
	padding: 200px 200px 200px 0px;
}

/* Content wrapper */
/* Width and height is set dynamically */
.sl-content-wrapper
{
	position: absolute;
}

.sl-content
{
	width: 100%;
	height: 100%;
	background: #fff;
}

Merci pout tout

Hello,
Désolé de revenir vers vous, mais avez-vous une idée du problème ?
Merci infiniment et tous mes vœux pour 2025.
P.

Hello.

Alors ça reste très compliqué d'essayer de reproduire le problème car le CSS que tu partages dans ton dernier message ne correspond pas au HTML que tu as posté au départ donc il faut procéder par devinette et c'est immédiatement décourageant.

Je viens de penser à un détail qui n'en est peut-être pas un : tu as bien pensé à appliquer un "Reset CSS", notamment pour supprimer les margin par défaut sur body ?

Salut Raphael,
Désolé pour le problème de compréhension de mes topics. C'est souvent le cas
Je tacherais d'être plus cohérent la prochaine fois
Je n'ai pas appliqué de reset CSS, je te dirai le résultat lundi (je n'ai actuellement pas accès à mes fichiers).
Encore merci et de nouveaux tous mes vœux
Modifié par PLGPPUR (03 Jan 2025 - 15:37)

Hello Raphael & gcyrillus,
voici une partie du HTML que j'espère plus "parlant" :
Normalement, après cela, j'ai tout envoyé

<div class="sl-slider" data-midnight="white">
	<div class="sl-slide" data-orientation="vertical">
		<div class="sl-slide-inner">
			<div class="bg-img bg-img-1">
				<h3 style="color:orange; opacity:0.7;vertical-align:top;">
					D
					<sup>
						r
					</sup>
					&nbsp;VON-
					<br>
					KLAFOUT'
				</h3>
			</div>
		</div>
	</div>

Et les CSS de l'image (celles du slider ont déjà été postées) :

.bg-img
{
	box-sizing: border-box;
	position: absolute;
	width: 100%;
	height: 100vh !important;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	background-color: black;
}

Merci infiniment, bonne fin de week-end,
P.

Bonsoir Raphael & gcyrillus,
ne sachant pas d'où vient le problème, j'ai mis un top: 10px (max-width: 767px en media queries) au slider.
Ça reste du bricolage (ce que je préférais éviter) mais ça fonctionne
Merci et bonne soirée à vous.