Slider non adapté aux mobiles HELP

[doog_2019]

Salut à tous 😃

Je suis débutant et j'utilise Prestashop 1.7. Je travaille généralement en local host mais depuis hier j'ai passé mon site en ligne chez OVH: Goodbrand.fr

Sur desktop et tablette mon slider est bien mais quand on est sur version mobile je trouve qu'il est trop petit.

Alors j'ai ajouté des règles Media queries pour qu'il soit optimisé sur mobile. 

Mon problème: Comment faire en sorte que mon image soit centrée quelque soit la taille de l'écran ?

EX ci dessous qui donne ce résultat en image

@media (min-width: 321px) and (max-width: 500px) {

#index .nivoSlider img {
left: -320px;
}

#index .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 290% !important;
}

Version avec écran en 375px qui a le rendu que je souhaite

Version avec écran en 425px avec la photo non centrée

Merci d'avances aux personnes qui pourront m'aider 😎

 

[Mediacom87]

Bonjour,

cela me semble pas mal pourtant

Par contre, souvnt on fait disparaitre le slider sur mobile car avec le touch on risque perturber la navigation car le slider peut essayer d'afficher une autre image plutôt que de descendre dans la page.

[doog_2019]

Bonjour @Mediacom87,

Merci pour votre réponse si rapide

Oui ça passe sur mobile en effet mais d'un point de vue visuel je préfère avoir une photo en plein écran sur mobile plutôt qu'un petit slider..(Les screens que j'ai fait, ce sont mes tests en local avec la commande que j'ai ajouté dans custom.css. Sur le site en ligne, cette commande n'est pas encore ajoutée.)

Mais du coup je ne sais pas comment faire pour que mon image reste centrée entre la taille 321px et 500px (en fonction du device que les users utilisent).

Si vous avez une solution, je suis preneur à 20000% ahahahah

Edited May 17, 2019 by doog_2019 (see edit history)

[Mediacom87]

Je ne comprends pas, comptez vous mettre plusieurs images sur le slider ?

[doog_2019]

@Mediacom87

Non, en fait, là c'est seulement un "ZOOM" de l'image actuelle que j'ai fait en ajoutant les commandes CSS suivantes et je ne compte pas mettre d'autres images pour l'instant.  

@media (min-width: 321px) and (max-width: 500px) {

#index .nivoSlider img {
left: -320px;
}

#index .nivo-main-image {
    display: block !important;
    position: relative !important;
    width: 290% !important;
}

L'idée, c'est qu'une fois le "ZOOM" fait, je veux que l'image reste centrée comme sur mon premier screen. (Entre le premier et le second screen, c'est la meme commande CSS mais une taille d'écran de mobile différent).

[doog_2019]

Salut @Mediacom87

J'ai mis la ligne CSS sur mon site en ligne: Goodbrand.fr

Essayez le device, vous comprendez mieux mon problème que j'ai mal exprimé:

- Iphone 6,7,8 normal

- Mobile L - 425px

Merci d'avance

 

 

 

[doog_2019]

Bonjour @FCZ,

Merci pour votre réponse

C'est ce que j'ai finalement pour chaque Device  

Bonne journée