Responsive design

[steph080968]

Binjour
J'essaye desesperement d'obtenir un peu d aide de la communauté.
Je n'arrive pas a comprendre ce qui ne marche pas sur mon site au niveau des images utilisees en head sur ma page d a cueil et les autres pages (slder en page accueil et image fixe differente sur ttes les autres pages). Impossible de bien "cadrer" ces images. Je voudrais en hauteur une image de 350px en a cueil et 200 sur le reste. J'ai donc "forçé" ca dans le head, mais ca ne sisualise pas bien et encore
Moins avec un smartphone. J'ai en fait forcé a 350 et 200px le jtlp-header-image mais je pense que je confond entre cela et
Le background...
Merci d un petit coup de main
Le site :
Https://accuwatt.jimdo.com

[FredVig]

Je ne comprend pas trop vos codes, mais en tout cas :
il manque des {
dans vos media query
relisez bien votre code, vous allez trouver :
par exemple

Code:

@media screen and (min-width: 1024px)
(ici il faut une accolade)
#page-2212482857 .jtpl-header--image {height: 200px;}

[steph080968]

Merci beaucoup. A vrai dire, je suis tout sauf un pro dans ce domaine mais je dois faire ce site pour ma petite boite... le truc c'est -je pense- que je ne comprends pas des choses qui vont vous sembler toutes simples... en fait je n'arrive pas à trouver le moyen d avoir deux hautzurs pour mon "image" de header (si c'est le bon terme..). En lecture sur un PC , je voudrais 350 pixels pour l'image (slider) de la page d accueil et 200 pixels pour l autre image destinée a toutes les autres pages du site. Et je n'arrive pas pour les pages hors accueil (je ne sais pas pourquoi) à dimensionner correctement mon espece de fond bleu avec la ligne blanche qui se termine normalement a droite par une sorte de "logo". Quoique je fasse, impossible d'avoir l'image en hauteur 200px que je souhaite, sauf à inserer une image avec bcp d'espace "vierge" en png en dessous... et quand je teste sur smartphone, c'est la cata... donc je me dis que ce n'est peut etre pas qu'un pb de responsive design, mais que je ne sais pas bien insérer les images du header... je modifie dans le head jimdo le parametre "jtpl-image-header" en forcant 350 ou 200 px selon que je suis sur la page d a cueil ou sous les autres, mais je me demande si c'est cela qu il faut faire... c'est peut etre le "background" qu il faut modifier... les media queries n ont aucun impact sur le site en visu smartphone...
Sus perdu... help
Merci bcp d'avance

[steph080968]

Bonjour,

En substance j'aimerais avoir une image header pour la page d'accueil en 350 px de haut (celle-ci est un slider) et une autre image en 200px pour toutes les autres pages du site (celle-ci est une image fixe).

Comment faut-il que je procède pour que cela fonctionne correctement à la fois en lecture PC et en visu responsive?

Mille merci d'avance.

PS : peut être que je ne poste pas ce message là où il faut. Je ne sais pas, pouvez-vous me dire?

[FredVig]

Ne mettez pas d'image avec logo ou texte dans cette zone arrière-plan : elle n'est pas constante, elle peut disparaitre ou être déformée, et il n'y a rien à faire à cela. Mettez une image de remplissage, un fond, une illustration, quelque chose de secondaire.
Vous pouvez aussi la supprimer totalement avec du code.
Votre code est correct, si vous corrigez les oublis de }
Ajoutez ensuite votre logo dans l'espace consacré (si il existe) ou en haut de contenu de vos pages.

[steph080968]

Merci bcp. Mais alors où puis je mettre mon smider de page d'accueil? Pour les autres pages, ok c'est une image fixe sans texte... le crai souci est peut être que je confonds jtpl-image-header et..autre xhise...
Je ne sais pas. Je coudrais juste arriver à xe que j'ai évoqué. J'espère que c'est jouable
Merci encore
Stephane

[FredVig]

Il faut bien comprendre le dilemme :
Sur jimdo, la têtière EST le fond de site.
Ils ont choisi de faire en sorte qu'elle soit proportionnelle pour satisfaire la responsivité.
Mais cela implique que le contenu risque de ne pas être toujours entièrement visible. On ne peut donc pas y mettre de logo ou de titre.
On peut "fixer" cette image, mais on perd la responsivité…

Dans votre cas :
Le slider de page d'accueil est bon. il y a seulement une image trop large (défense). Mettez des images de même proportions dans le slider.
Les titres sur les images n'apparaitront pas de façon sûre. S'ils sont important, il faudra les insérer en légende d'image et modifier leur apparence avec du code. Ce n'est pas très simple à réaliser. J'ai réalisé cela sur https://www.maison-des-arts-martiaux-tours.com/ mais je n'ai jamais essayé sur un slider fond d'écran. Je ne sais pas si on peut ajouter des légendes. A priori, j'essaierai une méthode similaire à ce que je vous recommande pour les autres pages :
Mettez un fond fixe en fond de site.
Votre code de modification de hauteur permet de placer le menu secondaire.
Puis, ajoutez votre bannière fixe en haut du contenu de chaque page.
Évidemment, elle ne fera pas toute la largeur de la page, mais ça peut se modifier avec du code (voir les tutos sur ce forum).
Le problème est que cela ne peut apparaître qu'au dessous du menu secondaire, et pas au dessus. Là encore, du code peut permettre de "remonter" ce contenu, mais vous aller créer de nouveaux risques de comportements imprévus selon les navigateurs.

[steph080968]

Merci bcp. Tres précis et pro... je vois que je devrais probablement changer de stratégie. Juste une question, si je fixe la hauteur mais que j'utilise des media queries pour fixer celle ci selon les ecrans, ca pourrait le faire? Oublions les titres des images, en effet ca va etre trop compliqué pour moi. D avance merrci encore

[FredVig]

oui, ça doit fonctionner sans pb

[steph080968]

Merci à vous. Je vais essayer

[steph080968]

Juste une question, car je ne sais pas du tout. Vous pouvez accéder au code de mon head jimdo? Je vais essayer de "bricoler" ce jead ce week end. Pourriez vous me dire où je fais des erreurs? Ou dois je vous envoyer le code?
Merci bcp et bon we

[FredVig]

Relisez les posts, je vous ai indiqué ou regarder vous oubliez des accolades

[steph080968]

Bonjour,

J'essaye encore (sans y parvenir) de faire en sorte que mon slider dans le head de la page d'accueil de mon site puisse avoir une hauteur plus etroite sur un smartphone.
J'essaye donc ceci et çà ne marche pas.... Si quelqu'un peut m'aider, ce serait génial.
Merci d'avance.

@media only screen and (max-device-width:640px) {
/* mobile */
#page-2207494157 .jtpl-header--image {height: 100px;}
}

Site :
https://accuwatt.jimdo.com/

[FredVig]

Code:

@media (max-width:650px) {
#page-2207494157 .jtpl-header--image {height: 100px;}
}

Mais ça devrait le faire déjà par défaut
Ce sont vos codes css n°4 qui perturbent la responsivité par défaut.

Changez les codes du CSS n4 en ne les appliquant que pour une largeur de fenêtre mini :

Code:

@media (min-width:650px) {
vos codes
}

[Contenu sponsorisé]