[RÉGLÉ] Problème de dimensions sur mobile

[dionee]

Bonjour

Je rencontre un sérieux problème de design sur le mobile (firefox et chrome).
Le template utilisé provient de chez mixwebtemplates, censé être responsive mais le rendu est très limite.
Je soupçonne du CSS mal réalisé, mais j'aurais besoin de vos avis et aides.

Le site est https://destyleenaiguille.fr/

Je vous remercie
Dionee

[manu93fr]

Bonsoir
ton template est responsive "à la bas" mais est surement mal "personnalisé"
Tu as la version free ou commerciale ?
Rien que le nom du site fait sauter tout le responsive en smartphone
Que veux tu changer exactement ?

[lomart]

Bonjour,
A part le header, le reste semble convenir
Il faut créer des mediaqueries pour ajuster la taille de la police aux largeurs de l'écran

@media (max-width: 480px) {.logo{font-size:650%}}

A adapter et dupliquer pour les autres largeurs
Une autre solution est de créer un module personnalisé avec cette action UP : https://up.lomart.fr/demo/action-text-fit

[dionee]

Bonsoir
ton template est responsive "à la bas" mais est surement mal "personnalisé"
Tu as la version free ou commerciale ?
Rien que le nom du site fait sauter tout le responsive en smartphone
Que veux tu changer exactement ?

Bonjour

J'ai la version commerciale. Je pense qu'elle doit être mal personnalisée car je doute qu'on puisse vendre un template avec défaut ....
Tous les éléments seraient changer pratiquement mais j'ai peu d'expérience concernant les sites sur mobile. La première action porterait sur l'espace horizontale. Comme vous pouvez le constater, la page principale n'occupe pas toute la largeur d'ou une perte de place.

Est-ce que ce serait le header qui en serait responsable ?

[dolmenhir]

J'ai la version commerciale.

Tu veux dire que tu as payé pour ça ?

On a vu mieux, et moins cher... à commencer par le template natif Protostar qui, avec 2 ou 3 petites modifs dans le fichier user.css, aurait donné un rendu visuel et ergonomique plus efficace

L'unité de mesure est en pixel alors qu'en rem c'eut été bien plus efficace et responsive...

je doute qu'on puisse vendre un template avec défaut

Doute pas trop.
De nos jours on vend tout et n'importe quoi, et plus souvent n'importe quoi...

Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.

Après, utiliser un système de colonnes avec des div en %, des "inline" et des "float" à tour de bras, sans aucune "mediaqueries" qui permettrait d'adapter la feuille de style aux principales résolutions d'écran, c'est pas très propre.
L'emploi de flex aurait, là encore, été bien plus inspiré.

Est-ce que ce serait le header qui en serait responsable ?

Le responsable c'est celui qui a fait ce template.

[manu93fr]

Tu veux dire que tu as payé pour ça ?

On a vu mieux, et moins cher... à commencer par le template natif Protostar qui, avec 2 ou 3 petites modifs dans le fichier user.css, aurait donné un rendu visuel et ergonomique plus efficace

L'unité de mesure est en pixel alors qu'en rem c'eut été bien plus efficace et responsive...


Doute pas trop.
De nos jours on vend tout et n'importe quoi, et plus souvent n'importe quoi...

Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.

Après, utiliser un système de colonnes avec des div en %, des "inline" et des "float" à tour de bras, sans aucune "mediaqueries" qui permettrait d'adapter la feuille de style aux principales résolutions d'écran, c'est pas très propre.
L'emploi de flex aurait, là encore, été bien plus inspiré.


Le responsable c'est celui qui a fait ce template.

Bonsoir,
le template tient la route apparemment, il est même compatible J!4 d'après l'auteur, c'est ce qui en est fait avec qui est surement mal personnalisé
https://www.mixwebtemplates.com/joom...oomla-template
Quand tu vois qu'il y a un font-size: réglé à 850% sur le logo ...


@dionee
Est ce toi directement qui a fait cette personnalisation ?
Est ce bien la référence de ton template commercial sur le lien que j'ai posté ?
Est il à jour ? (dernière version octobre 2021)

Le template étant commercial, il va être difficile de te répondre sur ses réglages "internes" mais il devrait y en avoir ... sinon, regarde si tu as un fichier custom.css pour y trouver les règles de personnalisation ... et ainsi pouvoir les modifier sans risque
Au minimum il faudrait déjà mettre l'écriture du texte du "logo" plus petite

[dionee]

Bonjour

J'ai effectué les modifications en me basant sur d'autres templates ou des avis de forums... ou en me basant sur le rendu donné sur le PC mais sans vraiement testé sur un mobile.

Le lien du template est le bon, c'est effectivement celui-ci; l'auteur est MixWebTemplate.

La taille du logo est importante pour le rendu sur PC, je voulais qu'il se démarque sans avoir à en faire une image.
J'ai regardé le UP et il me semble attractif; je vais faire des tests avec.

Avec un "width: 80%;" dans le "body.bg", sur un format mobile, les 20% manquants se font lourdement sentir.

Le but était d'obtenir une page scrollable sur un fond fixe au lieu d'avoir une seule page. D'où les 20%. Le rendu est parfait en PC mais sur mobile, c'est ce qui pêche

[dolmenhir]

Le but était d'obtenir une page scrollable sur un fond fixe au lieu d'avoir une seule page. D'où les 20%. Le rendu est parfait en PC mais sur mobile, c'est ce qui pêche

D'où l'impérieuse utilité des mediaqueries pour avoir des styles différenciés selon la résolution des écrans.
Avec celui par défaut tu en fait 1 de plus pour les largeurs intermédiaires (tablettes) et un pour les mobiles et ça devrait déjà aller beaucoup mieux.

Exemple

@media (max-width: 768px) {
.body.bg {
width:90%;
}
}

@media (max-width: 480px) {
.body.bg {
width:95%;
}
}

[lomart]

Je pense qu'en complétant le CSS proposé par dolmenhir dans le fichier custom.css, on répond à tous les besoins

@media (max-width: 768px) {
   .body.bg { width:90%; }
   .logo { font-size: 515%}
 }
@media (max-width: 480px) {
  .body.bg { width:95%; }
  .logo { font-size: 610%}
}

A adapter selon ses préférences

Il est aussi possible d'ajouter des espaces durs entre les prépositions et le nom pour contrôler les sauts de ligne. Exemple "De Style En Aiguille"

[dionee]

Bonjour

J'ai implanté le code css dans mon override.css
Au niveau du mobile, cela n'a pas changé grand chose dans la mesure où je peux toujours déplacer l'écran en horizontal

[lomart]

Bonsoir,

Il faut toujours ajouter les personnalisations en fin de fichier. C'est le principe du CSS

Je viens de tester ça marche !

Il faut retirer le . devant body. J'avais fait un copier-coller du code fourni par dolmenhir sans le relire.

Donc le bon code est :

@media (max-width: 768px) {
body.bg { width:90% }
.logo { font-size: 515% }
}
@media (max-width: 480px) {
body.bg { width:95% }
.logo { font-size: 610% }
}

[dolmenhir]

Il faut retirer le . devant body. J'avais fait un copier-coller du code fourni par dolmenhir sans le relire.

Désolé, c'est moi qui ai laissé trainer un point.
Merci à lomart pour ta vigilance

[dionee]

Effectivement, je n'avais pas vu non plus le "."
Cela n'a rien changé malheureusement, meme après avoir purgé le cache du mobile.
Est-ce que vous avez le même comportement ?

J'ai une piste éventuelle : en version PC, j'ai l'écart identique à gauche et à droite. Sur mobile, il n'y a que l'écart à droite. Celui de gauche est absent

[lomart]

Vous n'avez pas bien lu ma réponse :
Il faut toujours ajouter les personnalisations en fin de fichier. C'est le principe du CSS
Le résultat

[dionee]

Oui, désolé.
Je confirme, cela fonctionne

Merci à tous