Jump to content

Using Media Queries in HTML within a code block

Go to solution Solved by Ziggy,

Recommended Posts

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 

Link to comment
  • Solution

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;
  }
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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

Link to comment
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.