Fork me on GitHub




(1) 2 »


thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
bonjour à tous,

j'essaye de rendre un thème responsive, il y a quelques éléments ou ça fonctionnent mais d'autres pas du tout.
Avez-vous une idée pour que ça fonctionne, ou une source qui pourrait me guider?

Voici le site:http://www.goffaux-bois.com/

Et mon xoops et sous la version 2.5.6.

Bien à vous.
hugo

Posté le : 17/09/2014 15:14

Edité par bosco sur 03/11/2014 19:36:12

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
en premier, change ton doctype, il te faut un doctype html5

ensuite ajouter ceci au meta de ta page
<meta name="viewport" content="width=device-width">


Et après dans ton css
tu commences par les paramètres de taille d'écran le plus faible puis ensuite tu montes

/* ce qui est commun quelque soit la taille d'écran */

@media only screen and (min-width320px) {
/* ce qui doit être pour les écrans 320px */
}
@
media only screen and (min-width480px) {
/* ce qui doit être pour les écrans 480px */
}
/*etc*/

Posté le : 17/09/2014 16:56
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
Merci montuy, je vais regarder à ça.

Posté le : 18/09/2014 14:16

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
Bonjour à tous,



Dans mon fichier style.css j'ai intégré ceci:

@import url(mobile.css);

Et dans mon fichier mobile.css:

@media only screen and (min-width: 480px) {

body {
font-size: 13pt;

}
h1{
font-size: 1.6em;
}

h2 {
font-size: 1.4em;
}

h3 {
font-size: 1.2em;
}

h4 {
font-size: 1em;
}
img{
width: 75px;
}

#xo-canvas-globalnav{
text-align: left;
}



}

Mais rien du tout
Un petit coup de pouce?


Posté le : 27/10/2014 09:34

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
dans le <head> de ton thème, as-tu mis cette ligne (avant l'appel aux fichiers CSS)

<meta name="viewport" content="width=device-width" />


de plus je ferai appel a ton fichier mobile.css à la fin de ton fichier CSS. Pour la simple et bonne raison que le CSS est bête, c'est à dire qu'il applique la dernière valeur déclaré.

si tu déclare un font-size plus grand dans ton fichier CSS (sans fixé de largeur d'écran) ce sera cette valeur par défaut qui s'appliquera, pas celle déclarée.

et je te conseille aussi de faire attention à tes "media query"

@media only screen and (min-width480px) {

Veut dire s'applique a tout écran supérieur à 480 px de large, donc c'est à dire aussi aux écrans de PC.

@media only screen and (max-width480px) {

serai peut être mieux.
Et il ne faut pas avoir peur de spécifier plusieurs largeurs d'écran pour différents type de support.


Posté le : 27/10/2014 11:45
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
Oui dans mon head il y a bien:

<meta name="viewport" content="width=device-width" />

Comme tu m'avais dit dans ta première réponse.
Et je vais essayer de faire comme tu m'as dit pour appeler mon fichier mobile.css.
Pour les "media query", j'y travaille.

Merci de ton aide.


Posté le : 27/10/2014 13:07

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
Bonjour à tous,

Malheureusement ça ne fonctionne pas, on dirait, qu'il ne prend pas en compte le: @import url(mobile.css); dans mon fichier
style.css.

Par contre dans mon fichier style.css, j'ai bien deux import:

@import url(blocks.css);
@import url(module_content.css);



Posté le : 28/10/2014 11:16

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837
Rassemble tout dans le même fichier CSS, il faut éviter les import à tout va. Cela rallonge le temps de chargement de ta page.
Et en plus tu verras plus clair dans ton code.

Posté le : 28/10/2014 12:51
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Régulier
Inscrit: 13/03/2012 09:48
De Belgique-La Louvière
Messages: 140
Merci l'ami, ça fonctionne.

Posté le : 28/10/2014 14:55

"J'entends, j'oublie ; je vois, je retiens ; je fais, je comprends."
"Tout ce qui n'est pas donné est perdu."
Partager Twitter Partagez cette article sur GG+
Re: thème responsive
Admin Frxoops
Inscrit: 04/03/2011 09:10
De Lot
Messages: 2837

Posté le : 28/10/2014 17:26
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant
(1) 2 »



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

53 Personne(s) en ligne (27 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 53 | Plus ...