Image miniature en responsive

  • Posts: 41
  • Thank you received: 1
9 years 2 months ago #212958

-- HikaShop version -- : 2.5.0
-- Joomla version -- : 3.4.3

Bonjour,

Problème de gestion des images-vignette dans les fiches produits en responsive.
Voir les copies d'écran.

En responsive, le format "vignette" disparait.
Et les images apparaisent à la verticale.

Dans le frontend_custom.css
J'ai ajouté :
/**
* Taille miniature responsive
*/
img.hikashop_child_image { height: 70px !important; width: auto!important; }

Merci à vous pour votre aide.

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 26159
  • Thank you received: 4028
  • MODERATOR
9 years 2 months ago #212964

Bonjour,

Je ne vois malheureusement pas quoi vous dire pour vous aider vu qu'il n'y a aucune question dans votre message ni d'explication sur le soucis.
Je n'ai pas de soucis de miniature sur le site de démonstration ou sur mes sites de test (avec un template boostrap 2) ; je suppose donc que le soucis est lié à votre template ou à votre ajout de règle CSS.

Cordialement,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 41
  • Thank you received: 1
9 years 2 months ago #213362

Bonjour,

J'ai peut-être effectivement manqué d'explication.
Mais à la lecture de votre forum c'est apprrement un problème récurent.
Les problèmes de mise en page à partir du moment où le template n'est pas boostrap.
Et encore, comme vous le précisez en version 2 (et non en 3 ou 4 !).

Bref, je me vois à insérer du CSS un "peu partout".
Et là je bloque depuis un bon moment et je ne trouve malheureusement tjrs pas.

La gestion des vignettes ou des images miniatures en dessous de la grande dans la fiche produit.
Dans le cutom.css, j'ai ajouté :
@media only screen and (min-width: 481px) {
.hikashop_small_image_div img{ width: 30% !important; height: auto !important; }
}

Au format 'tablette' c'est bon.
Mais sur un format 'phone' les petites vignettes sont à la bonne taille mais elle ne reste pas à l'horizontale, elle bascule à la verticlale.

Je vous transmet 2 fichiers joints, ca sera sûrement plus simple à comprendre.
LA fiche produit correspondante (pour exemple) :
xxxxxxxxxxxxxxxxxxxxxxxxx

Je ne sais pas où agir pour que ces 2 vignettes restent 'collées'.
Si vous pouviez m'orienter et m'aider à trouver le bon code à ajouter.
Vous remerciant

Attachments:
Last edit: 9 years 2 months ago by celinem.

Please Log in or Create an account to join the conversation.

  • Posts: 82906
  • Thank you received: 13378
  • MODERATOR
9 years 2 months ago #213392

Bonjour,

C'est en effet un problème récurrent et c'est normal. Sans bootstrap, HikaShop utilise les anciennes interfaces d'HikaShop qui ne sont pas responsive (car cela n'existait pas quand elles ont été créées). Donc forcément, c'est normal que vous ayez des soucis d'affichage sur mobiles et tablettes dans ce cas. D'où le fait que nous recommandons soit d'utiliser des templates Joomla faits pour HikaShop ou des templates Joomla compatible bootstrap 2.

Il est normal que vous CSS ne change rien sur mobile.
Dans votre code CSS vous dites que vous voulez qu'il ne s'applique qu'à partir de 481px en largeur alors que sur mobile vous êtes en dessous de cela.
Ce genre de CSS devrait faire l'affaire:

@media only screen and (max-width: 481px) {
img.hikashop_child_image {
    width: 30% !important;
}
.hikashop_product_left_part {
    width: 100% !important;
}
}

The following user(s) said Thank You: celinem

Please Log in or Create an account to join the conversation.

  • Posts: 41
  • Thank you received: 1
9 years 2 months ago #213408

Génial ! :)
Ca m'a été d'un grand secours
Merci :)

Last edit: 9 years 2 months ago by celinem.

Please Log in or Create an account to join the conversation.

  • Posts: 1
  • Thank you received: 0
8 years 7 months ago #235841

Bonjour,
Je n'arrive pas à régler le chevauchement de mes vignettes, j'ai fait le tour du forum mais je ne vois que des problèmes sur mobile, c'est depuis pc en ce qui me concerne. J'utilise bootstrap sur joomla 3, ci-joint le problème en image.
Merci d'avance

Attachments:

Please Log in or Create an account to join the conversation.

Time to create page: 0.079 seconds
Powered by Kunena Forum