Jump to content

Adding a media query in a code block

By Flinx, in Customize with code

Go to solution Solved by Ziggy,

Recommended Posts

Flinx Level 5

Flinx

Posted
Posted (edited)

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 204
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Flinx
Flinx

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

  • Solution
Ziggy Level 14

Ziggy

Posted
  • Solution
Posted

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 

 ☕ Did I help? Buy me a coffee?

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

Link to comment
Ziggy Level 14

Ziggy

Posted
Posted
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 

 ☕ Did I help? Buy me a coffee?

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

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources