BLOGGER - responsive design

Bonjour tout le monde,

Je débute sur Blogger et dans le monde des css et codes html... et je suis bien perdue!

Le design et dimensions de mon blog tombent parfaitement sur mon écran 13 pouces mais sur un écran plus grand c'est la cata, la largeur du texte des articles est petite, les photos sont immenses et la barre latérale se retrouve en plein milieu des photos.
Bref, le design n'est pas responsive.

Avant d'avoir modifié le css et html, le blog s'adaptait bien à tous les écrans.
http://madeleineabicyclette.blogspot.fr/

J'essaie donc de revenir à la base, mais sans succès.
Lorsque je modifie le modèle Blogger, cela ne change rien à la disposition.
Quand je remets le code html de base, le problème est toujours là, la disposition est exactement la même.

Je n'arrive pas à localiser la source du problème, si l'un d'entre vous pourrait m'aider ça serait
C H O U E T T E

Merci beaucoup!
Modifié par 6l20 (04 Aug 2015 - 19:58)

Je viens de vérifier ton site sur mobile et desktop, celui-ci est bien en place.
J'en conclus donc que tu as résolu ton problème ?

J_B a écrit :
Je viens de vérifier ton site sur mobile et desktop, celui-ci est bien en place.
J'en conclus donc que tu as résolu ton problème ?

Merci JB pour ton message!
je n'ai malheureusement pas mon problème
le blog s'affiche correctement sur safari et google chrome mais pas du tout sur firefox...

Salut,

J'arrive à résoudre ton problème en majeure partie sur Firefox.

Voici comment est ton code au niveau des images trop grande :

<a style="clear: left; margin-bottom: 1em; margin-right: 1em; float: left;" imageanchor="1" href="http://4.bp.blogspot.com/-EVZE__1KS6w/VZz5SJux_yI/AAAAAAAAANU/nCHDPCNBJOU/s1600/IMG_3994.JPG">
	<img border="0" src="http://4.bp.blogspot.com/-EVZE__1KS6w/VZz5SJux_yI/AAAAAAAAANU/nCHDPCNBJOU/s1600/IMG_3994.JPG">
</a>

Je n'ai pas l'impression que le float: left; sur le <a> soit très utile, et si tu le retires, ton site a l'air de bien s'afficher sur Firefox.

J'espere que ça t'aidera

SpiStache a écrit :
Salut,

J'arrive à résoudre ton problème en majeure partie sur Firefox.

Voici comment est ton code au niveau des images trop grande :

<a style="clear: left; margin-bottom: 1em; margin-right: 1em; float: left;" imageanchor="1" href="http://4.bp.blogspot.com/-EVZE__1KS6w/VZz5SJux_yI/AAAAAAAAANU/nCHDPCNBJOU/s1600/IMG_3994.JPG">
	<img border="0" src="http://4.bp.blogspot.com/-EVZE__1KS6w/VZz5SJux_yI/AAAAAAAAANU/nCHDPCNBJOU/s1600/IMG_3994.JPG">
</a>

Je n'ai pas l'impression que le float: left; sur le &lt;a&gt; soit très utile, et si tu le retires, ton site a l'air de bien s'afficher sur Firefox.

J'espere que ça t'aidera

Salut SpiStache

Merci pour ton message!

Alors j'ai cherché dans mon code html ce qui correspond au code des images mais ne trouve pas... surement parce que je n'y connais absolument rien!

J'ai essayé en faisant une recherche dans le code avec une petite partie ou tout (plusieurs differents essais) du code que tu m'as envoyé ... mais je ne le retrouve trouve pas

Peux-tu m'indiquer comment rechercher ce code pour ensuite le modifier?

Merci par avance pour ta précieuse aide!

Hmm, en fait je n'ai aucune idée de comment est généré le code html que je peux voir sur ton site.
Je ne sais pas si c'est toi qui l'écrit, si la plateforme ajoute des choses par elle même lorsque tu envois un article...

À part rechercher "float: left;" dans le code html que tu peux éditer et voir si tu trouve ce qui correspond à la partie dont je te parle, je ne suis pas sur de pouvoir t'aider beaucoup plus.

Peut etre que quelqu'un qui connait les sites blogspot pourra t'aider

Alors j'ai un petit peu modifié le code html directement, mais il a surtout été modifié lorsque je change la mise en page et articles via la plateforme blogger.

La recherche "float: left;" n'aboutit malheureusement à rien

Je vais continuer à chercher!

Merci quand même pour ton aide!

En tout cas cherche de ce coté car c'est de la que vient le fait que tes images débordent.

Voila une capture du float que tu dois éliminer : (dans l'attribut style de la balise a)