Jump to content

Slider non adapté aux mobiles HELP


Recommended Posts

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

829889094_Capturedecran2019-05-17a11_53_46.png.060d18776f70c96d7b27f5414c3b9ec4.png

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

545616516_Capturedecran2019-05-17a11_52_27.png.b7b7ea0c5aff30d96f6baecd2ac84cbb.png

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

 

Link to comment
Share on other sites

Bonjour,

cela me semble pas mal pourtant

image.thumb.png.7ab8f6f3fca889d3f32451571c0627aa.png

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.

  • Like 1
Link to comment
Share on other sites

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 :D

Edited by doog_2019 (see edit history)
Link to comment
Share on other sites

@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).

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...