Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Responsive sur le design > Adapter la page à la taille de l'écran

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Adapter la page à la taille de l'écran

Répondre
La question
Posté le 27 Septembre 2016 à 15:28
tonny16

70 messages
Inscrit le 16/5/2008
Mon site
Bonjour,

Faisant mes articles au préalable sur SublimText, j'ai réussi (je viens tous juste d'apprendre le HTML et le CSS) à faire en sorte que ma page et plus particulièrement mes images s'adapte à la taille de la fenêtre. Ce que je veux faire c'est que si je mais ma page Internet d'un côté de mon écran, j'arrive à voir mes images entièrement.

J'ai réussi via sublimText, mais pas sur Wifeo, alors que j'ai copié le fichier CSS dans le HEADER ...

Merci de me dire comment faire.

En vous remerciant par avance.

 
Navigateur utilisé : Chrome

Dernières actualités de mon site :
• Apprenez à contrôler les données recueillies par Google
• Grâce à l'hippopotame vos logiciels resteront toujours à jour. Update Checker http://goo.gl/nRFBq
(Plus de news au sujet de mon site...)


 
Posté le 27 Septembre 2016 à 19:17
gabriel-support

Bonjour,

Si je comprends bien, tu souhaiterais que le contenu de ta page fasse 100% de la largeur de la fenêtre du navigateur ?

Si c'est ça il y a bientôt une option qui le permettra avec les designs Wifeo, mais elle sortira après le nouveau module boutique. En attendant il est possible de le faire, mais en design libre (si c'est bien là ta demande, je t'en dirais plus )

 
Navigateur utilisé : Chrome

 
Posté le 28 Septembre 2016 à 10:13
tonny16

70 messages
Inscrit le 16/5/2008
Mon site
Bonjour,

Merci pour ta réponse.

Dans mon code CSS, j'ai mis ça : (.screen étant associé à toutes mes images)

   SCRIPT
@media screen and (max-width: 1280px)
{
#page {
width : auto;

}

.screen
{
background-size: cover;
width: 600px;
height: 400px
}
}


En gros, quand je rétrécie ma fenêtre, mes images rétrécissent.

Le lien pour télécharger ma page si tu veux voir ce que ça donne.

https://www.dropbox.com/s/4r15pzjpuja [...] .zip?dl=0

Merci d'avance

 
Navigateur utilisé : Chrome

Dernières actualités de mon site :
• Apprenez à contrôler les données recueillies par Google
• Grâce à l'hippopotame vos logiciels resteront toujours à jour. Update Checker http://goo.gl/nRFBq
(Plus de news au sujet de mon site...)


 
Posté le 28 Septembre 2016 à 17:10
gabriel-support

Bonjour,

A quel élément correspond la classe "screen" ?

 
Navigateur utilisé : Chrome

 
Posté le 28 Septembre 2016 à 19:11
tonny16

70 messages
Inscrit le 16/5/2008
Mon site
Bonjour,

La classe .screen est associée à toutes mes images.

 
Navigateur utilisé : Chrome

Dernières actualités de mon site :
• Apprenez à contrôler les données recueillies par Google
• Grâce à l'hippopotame vos logiciels resteront toujours à jour. Update Checker http://goo.gl/nRFBq
(Plus de news au sujet de mon site...)


 
Posté le 29 Septembre 2016 à 20:00
gabriel-support

Bonjour,

ok, mais du coup je ne suis pas certain de comprendre ce que tu souhaites...

Au niveau de tes images, tu peux créer le block CSS suivant, ca t'évitera de mettre une class sur toutes tes images :
img
{
background-size: cover;
width: 600px;
height: 400px
}

Par contre le background-size: cover; ne s’appliquera que aux background.

 
Navigateur utilisé : Chrome

 
Posté le 1 Octobre 2016 à 9:22
tonny16

70 messages
Inscrit le 16/5/2008
Mon site
Bonjour,

Merci pour ta réponse.

C'est ce que j'avais fait, mais du coup, toutes les images et notamment les flèches qui amènent en haut ou en bas de la page sont à la taille demandée... Donc beaucoup, beaucoup trop gros.

Ce que je veux faire fonctionne avec les fichiers HTML et CSS que j'ai créé via SublimText, mais quand je le copie sur Wifeo, ça ne fonctionne pas.

Je veux que quand l'écran à une résolution inférieur à 1280, les images soient plus petites, tout simplement, afin qu'elles soient pleinement visible, car actuellement, elles sont coupées, car trop grandes pour l'écran.

 
Navigateur utilisé : Chrome

Dernières actualités de mon site :
• Apprenez à contrôler les données recueillies par Google
• Grâce à l'hippopotame vos logiciels resteront toujours à jour. Update Checker http://goo.gl/nRFBq
(Plus de news au sujet de mon site...)


 
Posté le 4 Octobre 2016 à 19:13
gabriel-support

Bonjour,

Pourquoi ne pas utiliser les class responsive de Wifeo ?

Par exemple tu as une class qui va mettre en ligne ton tableau de la page d'accueil composé de colonne.

 
Navigateur utilisé : Chrome

 
Posté le 24 Novembre 2016 à 9:26
tonny16

70 messages
Inscrit le 16/5/2008
Mon site
Bonjour,

Je pense que ce qui gène c'est que le menu ne s'adapte pas à la taille de la fenêtre. J'ai créé un page entière (avec menu, entête, pied de page, ...) et ça fonctionne.

J'ai aussi modifié ma classe screen :
   SCRIPT
.Etape {
color: red;
text-decoration: underline;
}
#Sommaire {
text-align: center;
}
.screen {

display: block;
margin: auto;
}
.fin {
text-align: center;
text-transform: uppercase;
color: red;
}
.suite {
text-align: center;
text-decoration: underline;
}
.technique {
font-style: italic;
font-weight: bold;
display: inline;
}
#page {
width: 900px;
margin: auto;
}
.img_tableau
{
height: 200px;
width: 300px;
}

@media screen and (max-width: 1280px)
{
#page {
width : 100%;

}

.screen
{
display: block;
max-width: 90%;
}
}


Maintenant je veux que mes images soient aux maximum à 90 % de leur taille.

En fait, je souhaite que la page (autre la page d'accueil, que je vais refaire prochainement d'ailleurs) s'adapte à l'écran. Or là, l'entête et le menu ne s'adapte pas.

Merci de me dire comment je peux faire sur Wifeo.

A bientôt.

 
Navigateur utilisé : Chrome

Dernières actualités de mon site :
• Apprenez à contrôler les données recueillies par Google
• Grâce à l'hippopotame vos logiciels resteront toujours à jour. Update Checker http://goo.gl/nRFBq
(Plus de news au sujet de mon site...)


 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES