FORUM D’ENTRAIDE INFORMATIQUE (FEI)Site d’assistance et de sécurité informatique

[laurent38387]

Bonjour,

j'ai passé pas mal d'heures à rendre un site responsive mais il me reste encore un problème à régler

J'ai un slide avec des photos taille 400px et le problème est que sur les téléphones, la résolution est souvent 320/ 360px de large.
Du coup le slide déborde sur le coté.

vous pouvez visualiser mon site ici : http://laetitiacreations.free.fr/

Code Html

Code : Tout sélectionner

<section id="slideshow">

	<div class="container">
		<div class="c_slider"></div>
		<div class="slider">
			<figure>
				<img src="slide/1.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			
			</figure><!--
			--><figure>
				<img src="slide/2.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure><!--
			--><figure>
				<img src="slide/3.jpg" alt="" width="400" height="400" />
				<figcaption>Diffuseurs</figcaption>

			</figure><!--
			--><figure>
				<img src="slide/4.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure>
			<figure>
				<img src="slide/5.jpg" alt="" width="400" height="400" />
				<!--<figcaption>Laetitia Cr&eacute;ations</figcaption>-->
			</figure>
			<figure>
				<img src="slide/6.jpg" alt="" width="400" height="400" />
				<figcaption>Laetitia Cr&eacute;ations</figcaption>
			</figure>
		</div>
	</div>
		
	<span id="timeline"></span>
</section>

CSS

Code : Tout sélectionner

#slideshow {
	position: relative;
	width: 420px;
	height: 420px;
	padding: 10px;
	margin: 0 auto 2em;
	border: 1px solid #ddd;
	background: #FFF;
	/* CSS3 effects */
	background: linear-gradient(#FFF, #FFF 20%, #EEE 80%, #DDD);
	border-radius: 2px 2px 2px 2px;
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
 
/* avanced box-shadow
 * tutorial @
 * https://www.creativejuiz.fr/blog/les-tutoriels/ombre-avancees-avec-css3-et-box-shadow 
*/
#slideshow:before,
#slideshow:after {
	position: absolute;
	bottom:16px;
	z-index: -10;
	width: 50%;
	height: 20px;
	content: " ";
	background: rgba(0,0,0,0.1);
	border-radius: 50%;
	box-shadow: 0 0 3px rgba(0,0,0, 0.4), 0 20px 10px rgba(0,0,0, 0.7);
}
#slideshow:before {
	left:0;
	transform: rotate(-4deg);
}
#slideshow:after {
	right:0;
	transform: rotate(4deg);
}
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
	position:relative;
	width: 400px;
	height: 400px;
	overflow: hidden;
}
	
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 400px;
}

/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 20px;
	margin:0;
	border-top: 1px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Georgia, Times, serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
/* fonction d'animation, n'oubliez pas de prefixer ! */
@keyframes slider {
	0%, 9%, 100%	{ left: 0 }
	10%, 25%		{ left: -100% }
	30%, 35%		{ left: -200% }
	40%, 55%		{ left: -300% }
	60%, 75%		{ left: -400% }
	80%, 95%		{ left: -500% }
}
/* complétez le sélecteur : */
#slideshow .slider {
	/* ... avec la propriété animation */
	animation: slider 25s infinite;
}
#timeline {
	position: absolute;
	background: #999;
	bottom: 5px;
	left: 5px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 32s infinite;
}
@keyframes timeliner {
	0%, 25%, 50%, 75%, 100%	{ width: 0;		}
	20%, 45%, 70%, 90%		{ width: 400px;	}
}
@keyframes figcaptionner {
	0%, 25%, 50%, 75%, 100%						{ bottom: -55px;	}
	5%, 20%, 30%, 45%, 55%, 70%, 80%, 95%		{ bottom: 5px;		}
}
}
/* ajouter à l'élément : */
#slideshow figcaption {
	/* ... la propriété animation */
	animation: figcaptionner 25s infinite;
}

#sContent li {
	display: inline;
}

#sContent {

	top: 0;
	left: 0;
	width: 200px;
	margin: 0;            
	padding: 0;
	
	/*CSS3 keyframes animation*/
	animation-name: AutoSlide;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

Je pensais créer une variable en disant dans mon CSS @media (max-width: 450px) => taille slide fera 250px
=> les photos sont sélectionnées dans le code html donc elles seront encore avec la taille 400px de base et la taille du slide est définie dans le code html

Sinon créer une variable avec un if dans mon code html qui détermine une taille suivant la résolution d'écran
=> dans le css, le slide sera toujours sur une base de 400px. Les photos ne se décaleront pas complètement (seulement de 250px)

Vous avez une idée?