4.5 Afficher un CSS que pour le responsive (mobile)

[Bocar]

Bonjour.

 

J'ai des class pour lesquelles j'aimerai que les attributs dans le CSS ne s'affichent que sur mobile (responsive) et pas sur PC bureau (je veux y afficher autre chose).

Que dois-je faire pour afficher les CSS de ces class que sur mobile ?

 

Merci.

[cybero]

Bonjour,

 

Tu as tout d'expliqué sur le site d'IPS, il y a des classes dédiées pour cela  

https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

Dans la section Basic show/hide functionality

 

Cela va te permettre d'afficher des sections en fonction du type d'écran de l'utilisateur.

Si tu ne veux afficher quelque chose que sur mobile, je pense qu'il suffit d'ajouter la classe ipsResponsive_showPhone

Edited May 2, 2021 by cybero

[Bocar]

Il y a 15 heures, cybero a dit :

Bonjour,

 

Tu as tout d'expliqué sur le site d'IPS, il y a des classes dédiées pour cela  

https://invisioncommunity.com/4guides/themes-and-customizations/css-framework/responsiveness-r250/

Dans la section Basic show/hide functionality

 

Cela va te permettre d'afficher des sections en fonction du type d'écran de l'utilisateur.

Si tu ne veux afficher quelque chose que sur mobile, je pense qu'il suffit d'ajouter la classe ipsResponsive_showPhone

C'est le style CSS "margin: 0px;" d'une certaine classe dont je veux qu'il ne s'affiche que sur Desktop.

C'est dans la feuille de style CSS, pas dans le code HTML.

Donc mettre class="ipsResponsive_showDesktop" ne fonctionnerait pas pour faire un margin: 0px.

Ou de quelle façon l'utiliser dans ce cas si c'est ça ?

 

Merci.

[Bocar]

Bonjour.

 

Savez-vous comment afficher un style (attribut CSS) uniquement sur mobile ou uniquement sur desktop svp.

 

Merci.

[cybero]

Ah j'avais mal compris ton besoin !

 

Je sais comment créer une classe css entière qui ne va s'appliquer que pour tel ou tel type d'écran (Responsive).

Si tu mets ton attribut dedans et que tu appliques la classe (au lieu du style directement) à tes éléments HTML cela devrait marcher.

 

Par contre oui il faut ajouter la classe ET modifier la partie HTML afin d'ajouter la classe créée.

Exemples de classe en fonction du type d'écran (Non testé) :

/* Pour IPS les téléphones c'est max 767px */
@media screen and (max-width: 767px) {
  .classe_que_sur_telephone {
    margin: 0;
  }
}

/* Pour IPS les desktop c'est minimun 980px */
@media screen and (min-width: 980px) {
  .classe_que_sur_desktop {
    margin: 0;
  }
}

/* Pour info entre les 2 il y a le format tablette */
@media screen and (min-width: 768px) and (max-width: 979px) {
  .classe_que_sur_tablette {
    margin: 0;
  }
}

 

En fonction de ce que tu veux faire, bien entendu adapter le contenu des classes 😛 et l'ajouter sur les attributs HTML concernés.

 

J'espère que je suis dans le vrai cette fois 

[Bocar]

OK, merci.

 

Le 08/05/2021 à 09:59, cybero a dit :

/* Pour IPS les téléphones c'est max 767px */

 

Le 08/05/2021 à 09:59, cybero a dit :

/* Pour IPS les desktop c'est minimun 980px */

Tu  veux dire quoi par max 767px ou minimum 980px?

Ça correspond à quo ?

 

Merci.

Edited May 9, 2021 by Bocar

[cybero]

Ce sont simplement des commentaires afin d'expliquer pourquoi j'ai mis ces valeurs là dans le code.

J'aurais par contre du préciser qu'il s'agit de la taille de la largeur de l'écran (max ou min selon les cas)

Par exemple :

@media screen and (max-width: 767px) {
  ...
}

Ne va s'appliquer que si la largeur de l'écran de l'utilisateur est inférieure à 768px.

C'est le type d'écran que IPS considère comme des téléphones.

[Bocar]

OK.

 

Donc pour appliquer un margin: 0; uniquement sur desktop, je mets la classe "classe_que_sur_desktop" dans le code HTML et dans le CSS, j'utilise :

@media screen and (min-width: 980px) {
  .classe_que_sur_desktop {
    margin: 0;
  }
}

?

 

Merci.

[cybero]

Comme indiqué plus haut, je n'ai pas testé mais effectivement oui cela devrait fonctionner comme cela

[Bocar]

Ça fonctionne.

 

Merci @cybero.