Auteur
Grafikart

75 Commentaires

945633b8f4ce4f7857d20fd26bd952f8?s=200&r=pg&d=mm
laurane, 09-10-2015 11:32:32 - Répondre

Comment ca se fait lorsque je tape dans mon css que ca ne change rien a ma page quand je l'actualise... je debute et la je comprends pas

3a3346c1b61ceb65468920da5a9fc4ff?s=200&r=pg&d=mm
Didier, 13-07-2015 11:07:25 - Répondre

Bravo,
J'avoue que j'ai ramé pendant quelques jours et quelques semaines pour trouver un tuto digne de ce nom, clair, simple et compréhensible... là en moins de 2 minutes, j'ai trouvé la réponse tant cherchée.
habitué à dreamweaver, les dernières mises à jour n'ont rien arrangé à mon problème, bien au contraire, j'ai cru que ce logiciel ne me serait plus utile avec leurs exemples de sites et booscrap, et grille fluide, etc, ou tout semble figé et à peine modifiable...
bref grâce à vous, je maitrise enfin le responsive css et retrouve ma liberté !
chapeau bas :), MERCI
Didier

9a5bff7ccc9292faf0756ffb51a8b49e?s=200&r=pg&d=mm
Deter, 05-02-2015 14:19:50 - Répondre

Très très bon tutoriel

254b2433acbca58b2cb379beea14b340?s=200&r=pg&d=mm
Sonfresh, 02-11-2014 12:30:24 - Répondre

Tres bon tuto.Thanks!!!!

7a765badc1d0e3da40f7eb54cbdcf946?s=200&r=pg&d=mm
fabien, 10-10-2014 13:28:22 - Répondre

Super tuto Merci à vous !

872979ecc62a9de7913d523dcf60d175?s=200&r=pg&d=mm
Jenny, 10-10-2014 00:40:20 - Répondre

Bonjour !!

Très bonne vidéo merci beaucoup. Je suis actuellement en train de faire mon site perso en responsive et j'avais une petite question.

Dans mon CSS j'ai mis un séparateur en image

background:url('images/separateur.png') repeat-x bottom;

Comment peut-on le faire disparaître ou modifier avec du responsive en sachant qu'il n'est pas en "dur" dans mon HTML?

Merci :)

4178a730aaef0f33f0801828085f30bf?s=200&r=pg&d=mm
pissenlit, 21-03-2014 11:21:55 - Répondre

Me voilà former sur les média queries, et moi qui m'en faisait toute une histoire !
Les explications sont très claires, merci pour ce bon tuto !

562c3a695f871f97e2ec6becf7e138e8?s=200&r=pg&d=mm
sk636, 06-03-2014 11:48:43 - Répondre

Excellent tuto.
Merci beaucoup ! :)

D4df8025c0f67c976dedd4bdca5f8e20?s=200&r=pg&d=mm
jmo, 19-11-2013 11:38:04 - Répondre

Merci pour votre tutoriel. Votre explication est très bien faite, mais je suis un peu profane en matière de choix judicieux des logiciels de développement adapté à ce genre de manipulation de CSS, pouvez vous m'indiquer ce que vous utilisez dans votre démo et qui parait particulièrement performant.
Merci d'avance et bonne journée

939dd697ada08f354f0b6abaf3d09e6b?s=200&r=pg&d=mm
malou, 02-11-2013 17:15:34 - Répondre

superbe!!! merci

Ce24d309968a9a33a0a194712acc7cdf?s=200&r=pg&d=mm
tempSt69, 02-11-2013 00:52:29 - Répondre

Parfait tuto. J'ai appris les media queries en 18:57... :D
Merci ! Je n'ai pas perdu mon temps !

Fcef6f0cf4ba2251b0a8017a190dcfa2?s=200&r=pg&d=mm
avelino, 21-10-2013 01:26:54 - Répondre

This is a great introduction to responsive design and media queries. Thanks a lot!!

55a654b91effe78f307e32566df5efdf?s=200&r=pg&d=mm
Aurelys, 13-09-2013 17:24:58 - Répondre

Il a un problème en navigation sur smartphone votre site ;), bon courage

C31543bd677f49d06e26ecb5fd0abe6d?s=200&r=pg&d=mm
mangeTaSoupe, 31-08-2013 00:18:11 - Répondre

Génial :) merci beaucoup ! :)

7053a379e86681f645ef7b2eb726fc4c?s=200&r=pg&d=mm
Marie, 31-07-2013 11:46:45 - Répondre

Merci beaucoup pour ce tuto vraiment très clair !

C8cfafbb23f883eac5178924f1b75002?s=200&r=pg&d=mm
nancyAlex, 17-07-2013 23:05:12 - Répondre

Coucou!!super tuto!!! et comment on fait pour modifier un logo quand on est sur un petit écran? genre modifier Facebook en logo F seulement?

Merci

517d3e17c081566fb1450252eba7795c?s=200&r=pg&d=mm
Twistix, 05-04-2014 19:00:14 - Répondre

En affectant une autre image à son css

444a7aed5a54003a13c01a889288af3d?s=200&r=pg&d=mm
dnartreb, 17-07-2013 16:51:48 - Répondre

Merci pour le tutoriel !

7541ea9c66f21c7db9ab93ffa8bab2b3?s=200&r=pg&d=mm
zebi, 03-06-2013 19:48:02 - Répondre

putain de merde tu me soul avec tes conneries espèce de zebi

63cd1893a146e3d05445720dc9e0c139?s=200&r=pg&d=mm
bilou, 09-04-2013 23:51:53 - Répondre

Bonsoir,
j'ai un petit problème dans mon css.
je travaille sur mon portfolio que j'adapte en responsive.
j'utilise dreamweaver et tout est impeccable quand je teste sur mon navigateur desktop mais quand je teste sur mon smartphone le site s'affiche en format tablette. pour la version smartphone j'ai mis @media only screen and (max-width:480px) et la resolution de mon smartphone est de 320x480.
voilà la page si vous pouvez me donnez une direction pour m'aider:
http://bilal.souir.free.fr/demo/v3.1/

8296a4b182e2bcdf24acee3f6bf2b487?s=200&r=pg&d=mm
billgates107, 02-04-2013 20:48:19 - Répondre

Rapide, clair et efficace ! Merci pour le tuto !

A79e8fc0a58d95151c3eeccc2e2f62bf?s=200&r=pg&d=mm
einkeun, 02-04-2013 19:18:39 - Répondre

Franchement ? Merci !

Ddd8e63f505dc037c86b2c11d8d89635?s=200&r=pg&d=mm
Daminoweb, 28-02-2013 18:30:54 - Répondre

Bonjour et bon résumé bien pédagogique (comme d'habitude ici ;-)
Par contre ne faut-il pas plutôt utiliser "@media only screen" pour éviter tout problème avec IE<9
cf "Example 9" : http://www.w3.org/TR/css3-mediaqueries/#media0
+ cf. bas de l'article sur http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Ad13ea3e5da46115dd24555a06f117a8?s=200&r=pg&d=mm
Tyma, 22-02-2013 19:57:58 - Répondre

Merci pour ce tutoriel très intéressant et surtout très bien expliqué !

Ae6df23419dd3ca2c904232270a82886?s=200&r=pg&d=mm
kiveun, 21-02-2013 11:58:13 - Répondre

Merci beaucoup pour ce tutoriel ! Très intéressant !

C1a674531c338aff4faddc0089095633?s=200&r=pg&d=mm
SimoLab, 18-02-2013 01:27:33 - Répondre

Excellent tuto :)
Mais j'ai une remarque sur le sens de l'adaptation du site.C'est plus sure de commencer à partir du style mobile plutôt que le contraire Pourquoi ? parce que beaucoup de navigateurs mobiles ne supportent pas encore les Media Queries du CSS3 et dans ce cas le chargement du style adapté ne sera pas fait et donc la version par défaut du style qui va être affichée.
d’ailleurs ceci est une règle fondamentale du "Responsive design" c.à.d : style mobile --> style tablette --> style desktop

C18e4913d5040d563b907b756f535042?s=200&r=pg&d=mm
Will, 17-01-2013 21:26:29 - Répondre

Hello, pour ceux qui utilise chrome, voici une super astuce :

-> clic droite, "inspecter élément", -> en bas à droite il y a une roue "Settings", -> onglet "Overrides", -> Cocher "Devices metrics" et mettre la résolution souhaité, la page va changer de résolution mais pas la fenêtre chrome ;)

A+

0cecc74576ab98aab37daffba02dfeb4?s=200&r=pg&d=mm
Zarog, 17-01-2013 21:07:08 - Répondre

Bonsoir ou bonjour à tous,

Tout d’abord super tuto et merci au passage ;). Je l'ai suivi à la lettre. Alors petit souci cela fonctionne sur la première page (index.html), mais ensuite cela ne fonctionne pas sur les autres pages???? Hors en local tout est fonctionnel.

J'attends vos questions afin que je puisse vous aiguiller, sauf si j'ai la réponse directement.

Cordialement,

Z.

8f96d23157e95521d4eae49840ac9571?s=200&r=pg&d=mm
rbwebdev, 15-01-2013 11:06:54 - Répondre

Super tuto encore une fois.

J'ai une petite astuce que j'utilise personnellement;

Plutôt que de redimensionner la fenêtre du navigateur je fait un CTRL + '+' (zoom)
Cela me permet d'avoir mon media queries de mobile qui est utilisé mais la fenêtre de mon navigateur reste à la largeur de l'écran et donc mon firebug aussi.

Cette astuce permet donc d'avoir une visualisation du format mobile tout en gardant son firebug en bonne largeur pour faciliter la sélection des éléments sur ce dernier.

0caa9e17941d59b2379f65a13d986e1a?s=200&r=pg&d=mm
benbass, 08-11-2012 01:24:55 - Répondre

Merci beaucoup pour ce tuto !

Eb3f503a59e150847e5bef79a0d5de8f?s=200&r=pg&d=mm
MlleVans, 29-10-2012 17:06:55 - Répondre

Super simple et super efficace ! merci beaucoup!

A8600d08851c87fe999d764a87bda4db?s=200&r=pg&d=mm
BennyB, 16-10-2012 22:34:39 - Répondre

Super tutoriel, très instructif et agréable à suivre, merci et bravo !

995bdaa7e304e46fad3461a96dea2c25?s=200&r=pg&d=mm
Doktane, 14-10-2012 21:02:44 - Répondre

Super ce tuto, je vais me pencher la-dessus :)

A29b3baf6492838b84c6b8f2ab3ac796?s=200&r=pg&d=mm
macko, 08-10-2012 18:15:03 - Répondre

Merci pour le tuto j'ai une petite question concernant le display:none... il y a forcement des choses non adaptable et qu'il faut du coup cacher sur une version mobile le display none ne nous pénalise t'il pas pour le référencement mobile?

39b83d5acf04892f6f761729beae561b?s=200&r=pg&d=mm
yara, 14-07-2012 20:36:21 - Répondre

Simple et clair !
Est-ce que tu utilise Autre chiose que Live Reaload pour recharger ton css sans faire F5 ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Jeremy, 10-07-2012 18:24:35 - Répondre

Tes tutoriels sont d'une rare qualité, un grand merci !

9719e1121aa6598ba8f14fb1230d1d87?s=200&r=pg&d=mm
aerosolAir, 01-07-2012 15:28:55 - Répondre

merci pour ce tuto très clair.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
kevin, 28-06-2012 15:06:06 - Répondre

pile le tutoriel que je cherchais merci beaucoup. Reste plus qu'à adapter les explications sur son propre site. Et puis bon pour ie 8- bah un jour ils ne seront plus utilisés donc on va pas trop se prendre la tête ^^

Da857472427d00b2c320fe812f250c5b?s=200&r=pg&d=mm
atch , 15-04-2012 19:32:18 - Répondre

pour répondre à ta question :
tu fais clic droit puis procéder à l'inspection de l'élément pour voir directement l'élément html que tu souhaite sinon F12 dans chômé

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Mectoub, 23-02-2012 19:25:55 - Répondre

Très bon tuto!
Une question me hânte (même si elle n'a rien à voir avec ce tuto).
Savez-vous si on a le droit d'utiliser une image d'un smartphone pour illustrer justement un webdesign pour smartphone?
Qu'elles sont les conditions relatives au droit d'image notamment?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Stephen, 31-12-2011 14:34:07 - Répondre

très bon tuto, merci ;-)

A7f54ab5104018ab3980ad4bb2ed2ca5?s=200&r=pg&d=mm
Steeve.C, 07-12-2011 15:29:50 - Répondre

Un grand merci pour cette vidéo clair, net efficace. C'est Génial merci !

19abfee84b1818e15f8695d5be45062b?s=200&r=pg&d=mm
Olivier C, 18-10-2011 11:29:35 - Répondre

Hem, j'ai trouvé sur votre site : il ne s'agit pas d'un addon pour Chrome et il s'agit de "Sublime Text 2"...

19abfee84b1818e15f8695d5be45062b?s=200&r=pg&d=mm
Olivier C, 18-10-2011 10:12:09 - Répondre

Merci pour le tuto, j'emploi déjà cette technique mais je ne la maîtrise pas encore bien, j'aimerais passer à la vitesse supérieure...

Juste une question : quel est l'addon, genre "notepad++", utilisé pour Chrome dans l'exemple ? Ça m'intéresse beaucoup.

E148c58ce6360db68670c293b6b96bab?s=200&r=pg&d=mm
slhomme, 07-09-2011 22:17:54 - Répondre

Tres bon tuto,

Si je peux suggerer une petite addition sympa pour appliquer du "responsive" sur des images et des videos:

Videos: (youtube, vimeo, etc): http://fitvidsjs.com/
Images: http://adaptive-images.com/

Merci pour ces tres bon tutos en tt cas!

Bf109bc06f1cf94900e8bbddc0b231c1?s=200&r=pg&d=mm
topher, 31-08-2011 15:01:10 - Répondre

Je trouve cela super, par contre j'ai fait l'erreur de faire le test sur cette page, avec la video en cours, et la le résultat, est simple sous chrome, plantage dù à la présence de la video. Donc faire attention à la présence d'une video en flash ;)

Fd9585a1abe2d709179f9d2fe1e1d386?s=200&r=pg&d=mm
Ivan, 30-08-2011 15:58:55 - Répondre

Pour éviter de casser les habitudes des utilisateurs sur un ordinateur classique il suffit de remplacer les max-width et min-width par max-device-width et min-device-width.
(pour le dev laissez max-width et min-width mais pour la prod changez)
;)

Fdcc9d3b46eb662837d796f4bdd4b9cf?s=200&r=pg&d=mm
Annuaire, 29-08-2011 01:28:54 - Répondre

En effet, très pratique ! merci pour ce super tuto !

35084661b59091c21dd2b9c7d42ce2fb?s=200&r=pg&d=mm
ju150, 27-08-2011 22:04:14 - Répondre

pour un format mobile on peux pas mettre le changement de CSS a moins de 500 px ?

067431ce6c579a281a5c732abc7f4f31?s=200&r=pg&d=mm
moussacbb, 27-08-2011 07:44:50 - Répondre

Une question, pour la navigation mobile le téléchargement est limite et le faite de cacher les images avec un Display a none n’empêche pas le téléchargement de ces dernières, donc n'y aurait il pas une solution palliative ?

35084661b59091c21dd2b9c7d42ce2fb?s=200&r=pg&d=mm
ju150, 27-08-2011 22:03:10 - Répondre

je me suis posé la meme question, mais je pense que du moment ou le navigateur ne les affiche pas, elles ne sont pas chargées !

52ec2f691fa42fb5b1ddb5c158c26bb4?s=200&r=pg&d=mm
cicoub13, 26-08-2011 19:54:35 - Répondre

Merci beaucoup, ça marche !!!

Dc1974ca01a274aa820639f6527c2d13?s=200&r=pg&d=mm
djeyzz, 26-08-2011 17:47:57 - Répondre

Très bon tuto :)

C79832577e9347405470654e6c432882?s=200&r=pg&d=mm
iCoda, 26-08-2011 17:15:53 - Répondre

Excellent. Merci Graf' ! ;)

52ec2f691fa42fb5b1ddb5c158c26bb4?s=200&r=pg&d=mm
Cyril Beslay, 26-08-2011 11:12:53 - Répondre

Bonjour,
Premièrement, très beau tutoriel, toujours très clair, et qui donne envie de tester. J'ai testé justement sur le site http://www.movielike.fr
Cela fonctionne quand je réduis mon navigateur, mais ne fonctionne pas sur les mobiles. Je ne vois pas où je me suis trompé. Peut-être du Javascript qui vient bloquer tout ça, ou d'autres CSS qui influent.
Merci d'avance pour votre aide.

1
Grafikart, 26-08-2011 14:24:19 - Répondre

Certain téléphone simule un navigateur en > 900 pixel et casse le système. Dans ce cas ajoute
<meta name="viewport" content="width=device-width" />
Dans ton head

A9bbcd616a036f7d3f43fc60147d9e26?s=200&r=pg&d=mm
Mateofix, 25-08-2011 17:29:35 - Répondre

Excellent tutoriel que j'ai mis en pratique sur le site que je suis en train de développer, merci :)

Bfc9210282734ce6f04b13de7ce7c380?s=200&r=pg&d=mm
Laurent, 25-08-2011 16:08:10 - Répondre

Jusqu'ici je n'étais pas très chaud pour me lancer dans les media queries (même si je dois avouer que j'étais asser intéressé) car ca avait l'air assez compliqué, mais je dois avouer que grâce à ton tuto ca a l'air extrémement simple à mettre en oeuvre (surtout avec la possibilité de rajouter les nouvelles règles dans la css existante).

Bref, un tout grand merci pour ce tutoriel, qui une fois de plus, est impeccable ;-)

5f43449604ec24dfe7bfacbd278e79f6?s=200&r=pg&d=mm
Iacdimix, 25-08-2011 11:45:44 - Répondre

Mercy pour cette excellent Tito. Je post ce commentaries sur iPhone et le site est trés fluide et plus pratique

15c3dcd79aea9313edbdc610cd89eb61?s=200&r=pg&d=mm
reduf, 25-08-2011 07:50:53 - Répondre

Merci. C'est excellent.

9560f839aa66fae20ec30a891364b1cd?s=200&r=pg&d=mm
dawinch, 25-08-2011 04:05:19 - Répondre

Merci. C'est limpide.

13864
Joouul, 25-08-2011 02:14:26 - Répondre

excellent :) je l'utiliserai sur le blog de mes sites :)

C98757c6c236e0634b0f605f911c3ed4?s=200&r=pg&d=mm
CowBoySD, 25-08-2011 01:46:32 - Répondre

Merci, super tutoriel !

6445
tetsuo, 24-08-2011 23:00:32 - Répondre

excellent comme dab ! Merci !!

6708
Etix, 24-08-2011 22:35:07 - Répondre

C'est excellant ! Merci :D

37d445d0e088729b17137b48d12742ce?s=200&r=pg&d=mm
superg2, 24-08-2011 22:32:27 - Répondre

quelle efficacité, un tuto similaire est paru récemment pour mettre en place ce genre de truc sur le CMS drupal : http://www.leveltendesign.com/blog/tom-nelson/three-ways-use-media-queries-drupal

enjoy

6250
Nazahel, 24-08-2011 22:30:03 - Répondre

Merci beaucoup pour ce tuto encore une fois très utile et clair !

744dfc17b9920cc8774aaef7843ec841?s=200&r=pg&d=mm
Kocal, 24-08-2011 22:24:11 - Répondre

Yeah! Excellent, vraiment un grand merci! :D

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
matista19, 25-09-2011 18:51:57 - Répondre

ouai super tuto comme d'hab quoi ;)