Responsive design et media queries

Bonjour,
Je suis plutôt novice et je dois réaliser un site web pour la petite société pour laquelle je travaille. J'ai déjà bien avançé avec Jimdo, mais je me heurte à un problème de "responsive design".
Tout d'abord, voici le lien vers le site en construction (très simple, mais cela nous suffit).

https://accuwatt.jimdo.com/


Mon souci est le suivant.

J'ai une image dans le head pour ma page d'accueil (c'est un slider) et une autre image (fixe) pour toutes les autre pages.

Cà passe très bien en lecture PC, mais dès que je passe sur une tablette ou un smartphone, ca ne va plus

J'ai bien essayé les Media queries, mais rien ne semble fonctionner.

Auriez-vous une petite idée pour moi ?

Mille merci d'avance.

cordialement

Stéphane

Salut,

Qu'est-ce que tu entend par :

Steph73 a écrit :
dès que je passe sur une tablette ou un smartphone, ca ne va plus

Si on ne sais pas ce qui bloque c'est plus compliqué pour nous

Et aussi :

Steph73 a écrit :
J'ai bien essayé les Media queries, mais rien ne semble fonctionner.

Qu'as tu tenté ? qu'est-ce que tu veux faire ?

bonjour Laurent,
En fait, lorsque je regarde mon "site" sur un smartphone ou une tablette, le slider que j'utilise pour la page d'accueil ainsi que l'image pour toutes les autres pages ne sont pas "responsive". En fait il n'y a pas d'adaptation au format (résolution) d'un smartphone.
Cf capture jointe.
J'ai essayé d'utiliser des meida queries mais il semble que celles ci ne soient pas prise en compte...
Merci d'avance pour ton aide.

Alors que j'ai çà en lecture sur PC. Et idem pour le slider (encore que le comportement est différent). En effet, j'ai "forçé" des hauteurs différentes pour le head page d'accueil et le head "autres pages"..en mettant cà (exple pour une page) :
#page-2207494157 .jtpl-header--image {height: 350px;} /* page accueil */
#page-2212482857 .jtpl-header--image {height: 200px;} /* autres pages*/

capture ecran manquante

Et voilà aussi ce que donne le menu sur smartphone... Illisible, mais je suis pas doué...

Quand tu dis que le slider n'est pas "responsive" c'est juste qu'il ne s'affiche pas c'est ça ? Pour moi rien à voir avec le responsive. Sur mon tel sous Chrome il s'affiche bien... le seul truc c'est que ton image de fon est vachement haute et plein de noir. Du coup le bleu s'affiche mais derrière le header et je ne vois que le noir https://image.jimcdn.com/app/cms/image/transf/dimension=1440x/path/s384d2b34a402447d/backgroundarea/ie44f355a547eb419/version/1493299937/image.png


Pour ton menu il manque juste une couleur de Background sur le block <nav>

Laurent,

Merci bcp. En fait, le slider s'affiche assez bizarrement. Il est très haut et en effet sur les pages (hors accueil) il y a une grande bande noire. Je ne sais pas d'où elle vient... Aurais-tu une idée pour y remédier?
Concernant la couleur de Background. Que me suggères-tu de rajouter précisément dans le head?

Merci bcp de ton aide.

En fait, je ne comprends pas car mon image (celle que tu m'as copié en lien) n'a pas du tout de bande noire en-dessous. C'est un png avec du transparent en dessou (là ou cà apparait noir....)

Mmmmmmm il y a peut etre une compression automatique de l'image et le transparent ressort en noir... je ne connais pas Jimdo du tout je vais avoir tu mal à t'aider...
En fait ton menu est fixé en haut de la page et ta page comment derrière du coup l'image est trop haute.

(je viens d'y retourner et ca a changé j'ai l'imprerssion d'avoir ton image bleu mais grossi pour que ca rentre.)

Pour le fond du menu un

.jtpl-mobile-navigation {
   background-color:#fff;
}

peut aller par contre je ne comprend pas pourquoi tu me parle du head hahaha il faut juste donner la couleur de fond à ton menu. Encore une fois je ne connais pas du tout Jimdo ou ces outils de conception... désolé

Merci Laurent,

Oui j'essaye de bricoler pour que çà passe mais rien à faire. Qui connaitrait Jimdo pour m'aider? Une idée?

Merci bcp en tout cas