[RÉSOLU] Mon thème n'est pas très responsive !

LewoLewo Member
janvier 2016 modifié dans Entraide et S.A.T
Bonjour à tous,

Voilà un sacré bout de temps que je n'ai plus posté ici... n'empêche que je suis un fidèle de Pluxml. J'ai cherché mieux ailleurs : en vain !
Dernièrement, je me suis bricolé un petit thème perso. Un truc sobre. Pour un blog de voyage. Pour les copains qui sont restés là-bas. Bon, j'ai pu bidouiller un truc qui collait pile poil avec l'idée que j'avais dans le dedans de ma tête. Sauf que...

...sauf que, ça grogne un peu, on me le reproche, visiblement (je ne puis pas vérifier) le bouzin n'est pas super responsive-machin-truc. Qu'il ne s'adapte pas ou peu aux affichages sur téléphones par exemple. Que ça gronde dans mon dos. Que moi je bidouille, je démonte, je remonte comme je puis avec ce que je sas faire, mais que j'y connais rien au CSS web-design-hyper-responsive-W3C-cent-pour-cent-valide. Que si, et je suis certain que oui, il y a une bonne âme ou deux pour me filer un coup de main, je prend !

Faute d'une super connexion actuellement, je puis seulement vous donner l'adresse du blog déjà en fonction, histoire de jeter un œil : http://miaouw.info
Dès que possible, si quelqu'un se propose de m'aider, je balance un paquet complet avec mon fameux thème...

Bien à vous.

Réponses

  • danielsandanielsan Member
    hello
    effectivement ... pour vérifier ce qu'il se passe tu peux déjà réduire la largeur de ton navigateur ...
    L'équipe de PluXml a développé une superbe feuille de style CSS responsive : PluCSS
    simple et très compréhensible ;)
    bon courage, ton thème est relativement simple, ça sera facilement adaptable
  • kowalskykowalsky Member
    Salut Lewo,

    Une modification rapide pour rendre ton site un peu plus responsive :

    remplace à la ligne 168 de minou.css
    .content {
    clear: both;
    margin: 0 auto;
    padding-top: 10px;
    width: 800px;
}

    par
    .content {
    clear: both;
    margin: 0 auto;
    max-width: 800px;
    padding-top: 10px;
    width: 90%;
}


    (la valeur de "width" à 90% permet d'ajouter une petite marge latérale facilitant la lecture pour éviter que le texte ne soit collé de chaque coté)
  • LewoLewo Member
    danielsan > Grrr ! J'ai découvert ça un peu tard, et pour bien tout comprendre, j'ai beaucoup à réapprendre. Mais je garde sous le coude. Merci.

    kowalsky > Ah ! Merci bien, que c'est déjà mieux. Peut-être même suffisant ? Je pensai, je ne sais pas pourquoi, que l'attribut "max-width" était déprécié. En tous cas, avec mon navigateur, petit ou grand, ça semble bien.

    Merci à vous. Je ne met pas (encore) ce sujet en résolu, si jamais il y à d'autres propositions...
  • kowalskykowalsky Member
    Ça s'affiche déjà mieux sans la largeur fixe de la colonne principale :)

    Par contre bien qu'utilisant des valeurs relatives dans ton CSS (em et %), le texte s'affiche avec des petits caractères sur mobile. Cela devrait s'améliorer en ajoutant la ligne suivante après <head> dans le fichier header.php de ton thème :
    [== Indéfini ==]
<head>
	<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0">

    Max-width et min-width sont utilisés très souvent dans les média queries en CSS pour permettre d'ajuster l'affichage en fonction de la résolution d'écran. Tu trouveras une petite explication en image sur le tuto du Hollandais Volant

    (tu voudras sans doute appliquer les mêmes corrections pour ton site http://miaouw.eu.org/)
  • LewoLewo Member
    janvier 2016 modifié
    Ah ! Intéressant ce truc. J'ai potassé. Un peu. J'ai mis en place...
    Merci pour le coup de pouce (et la doc). C'est dur, quand on est que bidouilleur du dimanche, de se tenir au goût du jour. La technologie web roule très vite, en avion de chasse, moi je trottine derrière en mobylette. Heureusement qu'il y a des bonnes âmes pour aider ! :)

    [em](et merci d'avoir songé à mon autre site, mais je vais le fermer...)[/em]
  • kowalskykowalsky Member
    Bah pour quelqu'un qui trottine en mobylette, j'ai vu des templates CSS moins bien structurés et en prime sans les délicates petites attentions commentées ;)

    Pour preuve, en modifiant seulement 2 lignes de code ton site est devenu optimisé pour tous types d'écrans.

    Allez, je te propose quand même une nouvelle correction : il y a un retour à la ligne qui foire sur les très petites résolutions (width < 330px) quand le titre des articles est un peu long.

    Supprime le line-height à la ligne 49 de minou.css et cela le corrigera.
    [== CSS ==]
h1 {
    margin-bottom: 0;
    padding-top: 5px;
    font-size: 2em;
}
  • LewoLewo Member
    Et bien ! Je vais arrêter de me confondre en remerciements (même si, vraiment, merci) et mettre ce sujet en « résolu ».
Connectez-vous ou Inscrivez-vous pour répondre.