Using Media Queries in HTML within a code block

Hi,

Is it possible to set media queries in HTML within a code block.

I currently have multiple code blocks across my sight (they all have the same code). I am using these to show an animated scroll down arrow on different pages. 

This looks good on desktop however I want to hide the code block when it goes to screen sizes below 1000px.

Is there a way to add a media query, like you would in CSS, to the HTML code so that I don't have to target each code block across my website in a massive string of CSS. 

The code for my animated scroll arrow is below: 

<div class="scroll-down"></div>
<style>
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: -2px;
    display: block;
    text-align: center;
    font-size: 100px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
  width: 20px;
  height: 20px;
  border-bottom: 2px solid #2B6777;
  border-right: 2px solid #2B6777;
  z-index: 9;
  left: calc(100% - 28px);
    

  transform: translate(-50%, 0%) rotate(45eg);
    

    animation:         bouncey_move_down 3s infinite;
}

/*animated scroll arrow animation*/
  
@keyframes bouncey_move_down {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
  40% { transform: translateY(-20px) rotate(45deg); }
  60% { transform: translateY(-10px) rotate(45deg); }
}
</style>

Thanks,

Jon 

16 hours ago, Ziggy said:

You can simplify by adding all of the styles to Custom CSS and yes you can use a media query to hide it on mobile, like this:

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

Hi @Ziggy

Thanks for your reply. I am learning CSS as I go.

I just tried this and it worked perfectly. Thank you very much! 

Am I correct in saying that because I have created the class ".scroll-down", that is why I am able to then target that within my CSS? 

Just trying to understand things more for the future.

Thanks,

Jon

14 minutes ago, JonnyIlsley said:

Am I correct in saying that because I have created the class ".scroll-down", that is why I am able to then target that within my CSS? 

Spot on! That's the power of classes.

Ok great, thank you for your help!