Bonjour,
Comme pour l'override de vue que vous aviez qui vous empêchait de voir le résultat de votre configuration dans le backend, vous avez également ajouté pas mal de CSS pour changer l'affichage du précédent formulaire d'adresse. Et ce CSS personnalisé influence l'affichage du nouveau formulaire d'adresse.
Si je désactive tout le CSS de vos différents fichiers CSS custom qui affectent le formulaire d'adresse, j'obtiens un résultat propre:
i.imgur.com/6OhQTBD.png
Pour le tableau de bord, le CSS personnalisé du frontend ne l'affecte pas. C'est en grande partie pour cela que vous pensez qu'il fonctionne mieux.
C'est principalement à cause du fichier
www.sudkarting.fr/templates/joomspirit_123/css/custom.css
En enlevant:
@media (min-width: 800px) {
.hikashop_checkout_login .hkform-group {
width: 50% !important;
float: left;
}
}et
/* Fix HikaShop Layout - Side-by-Side */
.hkform-group {
display: flex !important;
flex-wrap: nowrap !important; /* Keep on same line */
align-items: center !important;
}
.hkform-group > label,
.hkform-group .control-label {
flex: 0 0 120px !important; /* Fixed width */
width: 120px !important;
min-width: 120px !important;
white-space: normal !important;
margin-right: 15px !important;
}
/* Allow input to shrink/grow */
.hkform-group .controls,
.hkform-group input,
.hkform-group select {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important; /* Allow shrinking */
}
.hkform-group {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
/* Handle spacing and width correctly */
box-sizing: border-box !important;
padding-right: 20px !important; /* Creates space between Col 1 Input and Col 2 Label */
}
/* Ensure absolute safety for inputs */
.hkform-group input,
.hkform-group select,
.hkform-group .controls {
max-width: 100% !important;
box-sizing: border-box !important;
}de ce fichier, vous aurez un résultat pas trop mal.
Vous pouvez ensuite vous aider de l'IA pour les ajustements CSS.