Jump to content

Adding a media query in a code block

Go to solution Solved by Ziggy,

Recommended Posts

Hi there!

I've used code block on some of my pages to add a sticky scroll, but I don't want it to appear on mobile. However, I'm struggling when adding my media query into the code block - the code works perfectly without it and when I add it it wont work.

 

Anyone who can see what I'm doing wrong?

 

Thanks a lot! 

 

<style> @media only screen and (min-width: 640px) #page .page-section {position: sticky!important; top: 0px!important}
html {scroll-behavior: smooth}
</style>

Edited by Flinx
Link to comment
  • Replies 3
  • Views 221
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Try this fixed code:

<style>
  @media only screen and (min-width: 640px) {
    #page .page-section {position: sticky!important; top: 0px!important;}
    html {scroll-behavior: smooth;}
  }
</style>

It may be better to use a collection ID to target a page rather than using a code block for this. Page header code injection might be equally better.

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
Just now, Flinx said:

YES! That did it! Thank you so much! Absolutely made my day 🙏🏼

Very happy to help!

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.