Problème affichage responsive design

Par ull, il y a 13 ans

Les bases HTML/CSS

Salut,
Je suis en pleine élaboration d'un thème wordpress et je m'attaque actuellement au responsive design.
J'ai mis en ligne une page d'exemple: Ull Blog.
Vous pouvez constater que sur ordinateur, aucun soucis. Mais sur mobile, enfin sur mon iTouch car je n'ai pas d'autre mobile, le site prend bien le design voulu mais avec une largeur trop grande.
Un screenshot pour mieux comprendre:

Quelques personnes pour tester sur leur mobile et m'envoyer leur retour?

J'ai déjà eu ce soucis avec un autre essai de responsive design sans trouver la solution :(
J'espère que quelqu'un aura une solution, merci d'avance.

4 réponses

trainsrenton, il y a 13 ans

en regarde vite fait j'ai remarquer deja que tes images on des dimension en px ... ce qui peut empecher ton design de s'adapter

ajoute sa a ton css :

img{
    max-width:100%;
    height:auto;
}

cette fonction a un petit soucis de compatibilité avec ie 6 et 7 il me semble mais il existe un hack faut juste remettre la main dessus et je te le partage.

si je peux te donner un dernier conseil il existe de tres bonne grilles toutes pretes comme skeleton cssgrid fluidbaselinegrid

pourquoi réinventé la roue ?

ull, il y a 13 ans

En fait, j'ai mis une largeur maximal de 500px au body pour les appareils donc l'écran est inférieur ou égale à 500px. J'ai fait ça pour que le body prenne bien toute la largeur et que le texte soit assez gros, mais sur iTouch il affiche une page plus large que 500px.

Ma question est donc, faut-il limité la largeur ou augmenté les font-size? il ne m'a pas semblé voir ça sur d'autre responsive.

Grafikart, il y a 13 ans

Regarde du côté de la méta viewport qui permet de dire au mobile comment se comporter :
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

ull, il y a 13 ans

Yes ça marche! merci beaucoup trainsrenton et Grafikart.