Masquer le bouton .html dans la vue mobile

Ma page Web dispose d'un bouton qui amène l'utilisateur à la section suivante de la page. Je veux cacher ce bouton dans la vue mobile, mais je ne peux pas trouver le bon css pour cela.Masquer le bouton .html dans la vue mobile

jsFiddle du Code:

https://jsfiddle.net/cgqme8xo/1/#&togetherjs=qTV1soRSqs

Html Code:

<section> 
<a href="#main" class="scroll-down" address="true" class="text-right hidden-md"></a> 
</section>

CSS:

.scroll-down { 
    opacity: 1; 
    -webkit-transition: all .5s ease-in 3s; 
    transition: all .5s ease-in 3s; 
} 

.scroll-down { 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    margin-left: -16px; 
    display: block; 
    width: 32px; 
    height: 32px; 
    border: 2px solid #EF4043; 
    background-size: 14px auto; 
    border-radius: 50%; 
    z-index: 2; 
    -webkit-animation: bounce 2s infinite 2s; 
    animation: bounce 2s infinite 2s; 
    -webkit-transition: all .2s ease-in; 
    transition: all .2s ease-in; 
} 


.scroll-down:before { 
    position: absolute; 
    top: calc(50% - 8px); 
    left: calc(50% - 6px); 
    transform: rotate(-45deg); 
    display: block; 
    width: 12px; 
    height: 12px; 
    content: ""; 
    border: 2px solid #EF4043; 
    border-width: 0px 0 2px 2px; 
}

Source

2017-09-28 i.maddy

Vous utilisez bootstrap. Vous n'avez pas besoin de css personnalisé. Voir ma réponse ci-dessous. – blendenzo

il suffit d'utiliser quelque chose comme:

@media (max-width: 600px) { 
    .scroll-down { 
    display: none; 
    } 
}

avec la largeur que vous devez cacher le bouton

violon mis à jour ici: https://jsfiddle.net/cgqme8xo/2/ simplement redimensionner la zone visible, vous verrez comment il montre/cache le bouton

Source

2017-09-28 19:05:19 caramba

cela a fonctionné. Merci de tout mon coeur. –

Désolé. J'ai accepté le vôtre maintenant. –

@media screen and (max-width: 460px) { 
    .scroll-down{ 
    display: none; 
    } 
} 
@media screen and (min-width: 461px) { 
    .scroll-down{ 
    display: block; 
    } 
}

Comment l'utilisation @media screen?

Source

2017-09-28 19:05:01 zynkn

Puisque vous utilisez Bootstrap, vous pouvez le faire sans CSS personnalisé comme ceci:

<section class="d-none d-md-block"> 
    <a href="#main" class="scroll-down" address="true" class="text-right"></a> 
</section>

Remplacez d-md-block par le point d'arrêt et le type d'affichage qui correspondent le mieux à vos besoins. Voir the Bootstrap documentation pour les options disponibles.

Source

2017-09-28 19:07:33 blendenzo

Cela fonctionnera-t-il en vue mobile? –

Il aura un affichage de "none" pour tout ce qui est plus petit que le point de rupture moyen. Donc, il sera caché sur mobile, comme vous l'avez demandé.Il serait probablement préférable de placer les classes d'affichage sur le '

' et non sur le '', cependant. Je vais mettre à jour ma réponse. – blendenzo

Je pense que j'ai mal compris ce que tu voulais. Voulez-vous que le bouton ne soit pas visible, mais reste fonctionnel? – blendenzo

Vous recherchez une requête CSS @media.

La première étape consiste à mettre une fenêtre <meta> tag dans le <head> de votre HTML:

<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>

Ensuite, vous utilisez la requête @media de votre CSS:

@media only screen and (max-width: 768px) { 
    .scroll-down { 
    display: none; 
    } 
}

Vous pouvez changer max-width: 768px à cependant beaucoup de pixels que vous voulez; Fondamentalement, lorsque la largeur de l'écran est inférieure à l'amout spécifié, le CSS dans la requête est utilisé, avec une priorité plus élevée que les autres CSS.

CodePen: https://codepen.io/AquatuzMagnus/pen/gGWybx
Essayez de redimensionner le navigateur pour voir si cela fonctionne.

Source

2017-09-28 19:11:30

cela a fonctionné aussi. Merci –

@ i.maddy Si cela a fonctionné s'il vous plaît marquez ma réponse comme accepté –

En Bootstrap 3, vous pouvez utiliser bootstrasp Responsive Utilities comme ceci:

<section > 
    <a href="#main" class="scroll-down text-right hidden-xs" address="true"></a> 
</section>

En Bootstap 4 Responsive Utilities:

<section > 
    <a href="#main" class="scroll-down text-right hidden-xs-down" address="true"></a> 
</section>

Source

2017-09-28 19:15:19 Kurohige

Oui dans Bootstrap 4 est également disponible ... jetez un oeil [ici] (https://v4-alpha.getbootstrap.com/layout/responsive -utilities/# content) – Kurohige

Masquer le bouton .html dans la vue mobile

Répondre

Questions connexes