Footer Responsive Mettre None mais faire un link

Par Malaury, il y a 4 ans

Les bases HTML/CSS

bonjour à tous !
je dois faire disparaitre tout ce qui se trouve dans mon footer Sauf mes fontawesomes en mode tel
je sais faire les nones en css pour que mes <p> et mes <a href> disparaissent en @media screen and (max-width: 426px) { mais je ne sais pas faire et je ne trouve pas comment : conserver UNIQUEMENT mes fontawesomes avec un lien soit je supprime mon a et du coup je n'ai plus de lien et OUI je ne vois que mes emoticons mais c'est pas ca que je souhaite et je ne sais pas ! j'ai tenté plusieurs trucs mais ca ne marche pas !
voici tout mon footer

<div class="container-fluid"> <div class="row justify-content-around"> <div class="col-3"> <i class="fa fa-home "></i> <a href="{{ path('accueil')}}">Accueil </a><br></div> <div class="col-3 text-center formation"> <p>Formation</p><br></div> <div class="col-3 text-end"> <i class="fa fa-user-plus"></i> <a href="{{ path('app_register')}}"> Inscription</a> </div> </div> <div class="row justify-content-around"> <div class="col-3"> <a href="{{ path('app_login')}}">Se connecter <i class="fa fa-wifi"></i> </a> </div> <div class="col-3 wikipedia text-center"> <a href="https://fr.wikipedia.org/wiki/Trick"> <i class="fa fa-link"></i> Wikipedia</a> <p>&copy; Copyright {{ 'now'|date('Y')}}&middot; malaury</p><br> </div> <div class="col-3 text-end"> <a href="{{ path('app_logout')}}">Se déconnecter <i class="fa fa-sign-out-alt"></i> </a> </div> </div> </div> </div> </footer>

car au final je dois juste CLIQUER sur le dessin pour aller soit à l'accueil soit me connecter soit voir mes images
je n'arrive pas à avoir le lien sur le dessin !! merci pour votre aide !
belle soiree

9 réponses

Arzou, il y a 4 ans

Hello !
Ce que tu peux faire c'est mettre ton texte dans des span, et ce sont celles la que tu vas mettre en display none.
Genre :

<div class="col-3 text-end"> <a href="{{ path('app_logout')}}"> <span class="a-masquer">Se déconnecter<span> <i class="fa fa-sign-out-alt"></i> </a> </div>
Malaury, il y a 4 ans

Merci Arzou c'est super génial !! c'est vrai je pense jamais à <span> !! j'ai reussi !!

et quant à ca : je dois le cacher ( il faudrait que du coup il ne soit pas dans un <span> ) pour que je puisse mettre à la place un button qui m'amene à une page !

<a href="https://fr.wikipedia.org/wiki/Trick"> <i class="fa fa-link"></i> <span class="cacher">Wikipedia</span> <span class="cacher"><p>&copy; Copyright {{ 'now'|date('Y')}}&middot; malaury</p><br></span> </a> </div> 
  merci bcp  c cool
Arzou, il y a 4 ans

Cool, tant mieux si ça marche :)
Par contre, je n'ai pas compris le truc du boutton pour aller a une page. Est ce que tu peux me ré-expliqué stp ?

Malaury, il y a 4 ans

hello arzou ! et bien en mode responsive 465 je dois avoir un fontawesome qui se mette pour ouvrir un page de detail !!!! compliqué!! ca je crois que je vais laisser tomber
en revanche je cherche encore pour faire en twig mon button se changer en deconnexion à la place de connexion ( pour ma nav) idem pour le lien dans mon footer !!!
Je fais bien apparaitre mon sign-in et mon sign-out mais ils apparaissent les 2 :)

en tout merci pour ton aide ca marche tres bien le span

Arzou, il y a 4 ans

La je ne peux pas t'aider, twig je ne suis pas un expert, loin de la ;)

Malaury, il y a 4 ans

merci t'inkiet j'ai trouvé :) il faut faire un if else

belle journée

Arzou, il y a 4 ans

top ;)
Merci à toi aussi ^^

Malaury, il y a 4 ans

hello

{% if app.user %} button logout {% else %} button login {% endif %}

enjoy