How to hide a scroll indicator on mobile

Site URL: https://www.klemmewolff.com/

Hi :)

I added a code block for a scroll indicator and I'm wondering if there's a way to hide it on the mobile breakpoint?

This is the code I have right now:

<div class="mouse">  

  <div class="mouse-icon">

    <span class="mouse-wheel"></span>

  </div>

</div>

<style>

  .mouse {

  margin: 50px auto;

  width: 100px;

}

.mouse-icon {

   width: 25px;

   height: 45px;

   border: 2px solid #F6BA93;

   border-radius: 15px;

   cursor: pointer;

   position: relative;

   text-align: center;

}

.mouse-wheel {

  height: 6px;

  margin: 2px auto 0;

  display: block;

  width: 3px;

  background-color: white;

  border-radius: 50%;

  -webkit-animation: 1.6s ease infinite wheel-up-down;

 -moz-animation: 1.7s ease infinite wheel-up-down;

  animation: 1.7s ease infinite wheel-up-down;

}

@-webkit-keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}

@-moz-keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}@keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}

</style>

Could anyone help me?

2 hours ago, Richardkw said:

Site URL: https://www.klemmewolff.com/

Hi 🙂

I added a code block for a scroll indicator and I'm wondering if there's a way to hide it on the mobile breakpoint?

This is the code I have right now:

 

<div class="mouse">  

  <div class="mouse-icon">

    <span class="mouse-wheel"></span>

  </div>

</div>

<style>

  .mouse {

  margin: 50px auto;

  width: 100px;

}

 

.mouse-icon {

   width: 25px;

   height: 45px;

   border: 2px solid #F6BA93;

   border-radius: 15px;

   cursor: pointer;

   position: relative;

   text-align: center;

}

.mouse-wheel {

  height: 6px;

  margin: 2px auto 0;

  display: block;

  width: 3px;

  background-color: white;

  border-radius: 50%;

  -webkit-animation: 1.6s ease infinite wheel-up-down;

 -moz-animation: 1.7s ease infinite wheel-up-down;

  animation: 1.7s ease infinite wheel-up-down;

}

@-webkit-keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}

@-moz-keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}@keyframes wheel-up-down {

0% {

    margin-top: 2px;

    opacity: 0;

}

30% {

    opacity: 1;

}

100% {

    margin-top: 20px;

    opacity: 0;

}

}

</style>

 

Could anyone help me?

Add this code into CSS
@media (max-width: 480px) {
.mouse {
display: none;
}
}
 

Awesome! It worked 🙂 Thanks