effet accordeon suivant la resolution

L'auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour , je souhaite afficher des images grâce à un effet accordéon sur mobile pour ne pas utiliser trop de place. Mais je ne souhaite pas que mon bouton s'affiche sur PC/tablette (donc ça affiche les images directement) Est-ce possible ? Car si j'utilise un display: none cela va cacher toute ma div contenant mes images ? Merci

+0 -0
Staff

(donc ça affiche les images directement) Est-ce possible ?

oui, il suffit de créer une mediaquery qui donne un display:none lorsque l'écran est adéquat. Tu peux tout à fait utiliser display:none sur le bouton en lui même et uniquement lui.

Peux-tu nous montrer ton code qu'on puisse t'aider d'une manière plus précise?

+0 -0
Auteur du sujet

J'ai ça :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="panel panel-default col-lg-6">
    <div class="panel-heading"> 
     <a href="#seelook" data-toggle="collapse"> Voir plus <span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
    </div>
        <div id="seelook" class="panel-collapse collapse">
            <div class="panel-body">  
                <div class="col-md-8">
                    <div class="row">
                        <tile class="col-md-6" ng-repeat="tile in tiles | limitTo : 4" tile="tile" look="look"></tile>
                    </div>
                </div>
            </div>
        </div>
</div>

j'ai essayé un

1
2
3
.panel-heading {
display : none;
}

Mais ça n'affiche plus mon bloc du tout. En fait je veux juste désactiver cet effet sur grand ecran

+0 -0

Salut !

Regardes sur le Net comment fonctionnent les media queries. C'est du CSS3 (sans javascript), ça marche sur tous les navigateurs récents, y compris sur les systèmes mobiles. Lire : alsacreations.com/...css3-media-queries.html et/ou openclassrooms.com/...mise-en-page-adaptative-avec-les-media-queries par exemple.

Dans ton cas, c'est super-simple, t'as juste à ajouter ceci à la fin de ton css :

1
2
3
4
5
@media (max-width: 481px) {
    .panel-heading {
    display : block;
    }
}

Édité par Buddy

Bien le bonjour tous ! :)

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte