Hikashop reponsive button cart

-- HikaShop version -- : 4.4.5
-- Joomla version -- : 4.0.5
-- PHP version -- : 7.4.25
-- Browser(s) name and version -- : Firefox et Safari Ipad

Bonjour,
- Nous aurions besoin d'aide car de nombreux éléments de notre boutique en ligne ne s'adaptent pas aux formats tablettes (par exemple) ou mobile ; voir captures écrans plus bas.
Éléments qui débordent (panier par ex) le conteneur, buttons collent la table au dessus, espace quantité écrasé et quasi non visible, formulaire champs pas assez hauts etc...)
De plus une bordure s'applique sur presque tous les éléments ce qui n’était pas le cas avant.

- Nous venons de changer de template et utilisons maintenant Rockettheme Versla Gantry 5.
- Nous utilisions avant cela un templates Yootheme warp 7 et avions été confronté à ce même problème . Vous nous aviez fourni ce code CSS qui avait largement résolu nos soucis d'affichages. Nous avons réutilisé ce code CSS dans le nouveau templates mais visiblement sans beaucoup de succès ...
Le reste du custom.scss sous Rockettheme fonctionne normalement, il ne s'agit donc pas d'un soucis à ce niveau là.

Merci d'avance

* Le code CSS custom actuellement actif en ligne

/* HS import old Yoo*/

/* HIKASHOP Bouton ajouter produit  */

.hikashop_cart_button  { width: 59% !important;}

/* HS Bouton ajouter produit  */
/* quantité de produit  et + -*/
.hikashop_product_quantity_field_2 {
  border-radius: 16px;
  border-style: solid;
  border-color: #000;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 4px;
    color: #555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
  background-color: #bcbdbd;
  text-transform: lowercase;
}
.hikashop_product_quantity_field_change {
  color:#000;
   border-style: solid;
  border-width: 1px;
  border-color: #9c9c9c;
  border-radius: 25px;
  background-color: #f4f5f5 ;
  margin: 2px;
  padding-left: 1px;
   padding-right: 1px;
}
  /* quantité de produit et + - */
/* tag sur fiche produit*/
.label-info[href], .badge-info[href] {
    background-color: #cbcbcb;
  border-radius: 16px;
}
/* tag sur fiche produit*/
/* bouton ajouter au panier */
a.hikashop_cart_button, a.hikashop_compare_button, .hikashop_cart_input_button {
  
    background: #61b6fd;
  color: #024d8c !important;
  border: 2px solid #047ee5;
}
a.hikashop_cart_button:hover, a.hikashop_compare_button:hover, .hikashop_cart_input_button:hover {
  background: #7dc1fa;
  color: #414242;
  border: 2px solid #0262b3;
}
/* bouton ajouter au panier */

/* bouton payer via nicolas HS*/
 .hikabtn_checkout_next{
 background-color: #46a546;  
 border: 1px solid #0a5500;
 font-size : 20px;
 color: #f5f6f5;
 padding:10px;
  }
 .hikabtn_checkout_next:hover{
    
 background-color: #50c050;  
 border: 1px solid #0a5500;
 font-size : 20px;
 color: #f5f6f5;
 padding:10px;
  }
/* bouton payer via nicolas HS*/
/* Fin HS import old Yoo*/

Merci pour cette réponse.
je vais appliquer cela des demain matin!
Pour la partie Panier HS (qui est dans une colonne à droite comme la capture le montre ) qui dépasse de sa boite vous auriez un bout de code CSS me permettant d'éviter cela?
En réalité cela déborde même sur un écran classique 192/1080...
J'ai essayé de réduire ça de 100 % à 90%

.hikashop_cart table {
    width: 90%;
}

<table class="hikashop_cart" width="90%">

Bonjour Nicolas,
Merci pour cette réponse.
J'ai effectivement élargi la colonne droite à 30% au lieu de 25 % et supprimé l’option quantité et supprimer.
Cela règle le pb !
La possibilité de changer le type de panier est aussi OK.
Je mets une capture d'écran pour que cela soit plus clair à d'autres, si cela peut servir.

Bonjour,

nicolas wrote: Hi,
3. Pour les boutons qui dépassent... ce n'est pas vraiment un problème de CSS mais plus de la structure du layout du template.
Comme il y a moins d'espace pour chaque zone, le texte dans le bouton est trop long.
Là, vous avez plusieurs solutions:
- changer vos overrides de traductions pour ces boutons pour avec un texte plus court, ou sur 2 lignes avec un

<br/>

- réduire la marge entre chaque produit dans les listings avec les paramètres de vos éléments de menu (onglet "Product options").

<a class="hikabtn hikacart" href="/bapteme/offrir-un-vol-en-biplace/product/4-bon-cadeau-biplace-decouverte"><span>Choisir avec <br>ou sans vidéo</span></a>

Cela marche merci beaucoup !