HTML ; afficher ou masquer du contenu sur mobile
Résolu
Nathanielmlmb
Messages postés
70
Statut
Membre
-
Pitet Messages postés 2845 Statut Membre -
Pitet Messages postés 2845 Statut Membre -
Bonjour,
Je suis propriétaire d'un site internet hébergé sur Tumblr.
Le CMS de Tumblr me permet d'ajouter des pages codées en HTML.
J'aimerais utiliser ce code CSS, afin d'optimiser l'affichage de mon site sur mobile ;
//medium+ screen sizes
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
Actuellement j'ai essayé de mettre ce code entre ces balises dîtes-moi si elles sont correcte ;
<style type="text/css">
<!--
Mon code CSS
-->
</style>
J'aimerais savoir à quel emplacement je dois écrire le contenu de ma page dans ce code afin qu'un bloc texte par exemple, ne s'affiche que sur navigateur mobile, et qu'un autre bloc texte ne s'affiche jamais sur navigateur mobile.
Merci
Je suis propriétaire d'un site internet hébergé sur Tumblr.
Le CMS de Tumblr me permet d'ajouter des pages codées en HTML.
J'aimerais utiliser ce code CSS, afin d'optimiser l'affichage de mon site sur mobile ;
//medium+ screen sizes
@media (min-width:992px) {
.desktop-only {
display:block !important;
}
}
//small screen sizes
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
Actuellement j'ai essayé de mettre ce code entre ces balises dîtes-moi si elles sont correcte ;
<style type="text/css">
<!--
Mon code CSS
-->
</style>
J'aimerais savoir à quel emplacement je dois écrire le contenu de ma page dans ce code afin qu'un bloc texte par exemple, ne s'affiche que sur navigateur mobile, et qu'un autre bloc texte ne s'affiche jamais sur navigateur mobile.
Merci
A voir également:
- Afficher/masquer texte html css
- Editeur html - Télécharger - HTML
- Transcription audio en texte word gratuit - Guide
- Excel cellule couleur si condition texte - Guide
- Comment masquer les amis sur facebook - Guide
- Masquer conversation whatsapp - Guide
1 réponse
Salut,
Ta balise style est correcte (l'attribut type est facultatif).
Idéalement cette balise devrait être placé dans la balise <head> de ton document html, mais elle fonctionnera également si tu la places dans la balise <body>.
Dans ton contenu, il te suffit alors d'appliquer les différentes classes sur les balises que tu souhaites afficher ou masquer, par exemple :
Bonne journée
Ta balise style est correcte (l'attribut type est facultatif).
Idéalement cette balise devrait être placé dans la balise <head> de ton document html, mais elle fonctionnera également si tu la places dans la balise <body>.
Dans ton contenu, il te suffit alors d'appliquer les différentes classes sur les balises que tu souhaites afficher ou masquer, par exemple :
<p class="desktop-only">Paragraphe visible sur desktop</p> <p class="mobile-only">Paragraphe visible sur mobile</p>
Bonne journée
Les deux lignes s'affichent normalement que ce soit sur mobile ou sur nagivateur
Il manque p-e une une règle pour masquer la classe mobile-only sur un écran large.
Regarde cette exemple et essaye de redimensionner la frame Result pour voir les changements.
http://jsfiddle.net/jcdgssp3/