Jump to content
doog_2019

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 😎

 

Share this post


Link to post
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

Share this post


Link to post
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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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).

Share this post


Link to post
Share on other sites

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

 

 

 

Share this post


Link to post
Share on other sites

Définissez des règles @media margin-right et margin-left avec des valeur en pixel pour chaque résolution. C'est sans faille.

  • Like 1

Share this post


Link to post
Share on other sites

Bonjour @FCZ,

Merci pour votre réponse :)

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

Bonne journée 

Share this post


Link to post
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...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More