Jump to content

How to disable a CSS effect on mobile

Go to solution Solved by sorca_marian,

Recommended Posts

Hi all,

What do I need to place in custom CSS to disable a css effect only on mobile? I am finding that making the top section sticky upon scroll wigs out on mobile and sort of blinks and also shows the top section through the background of other sections, so I just am going to opt to "disable" it on mobile view. Unless it can be fixed to work OK on mobile??

(FYI: This is the code I am using to make the first section of my homepage sticky and the other sections scroll up and over it.)

section[data-section-id="place unique section ID in here"]
{position: sticky!important; top: 0px!important}
html {scroll-behavior: smooth}

Link to comment
  • Replies 2
  • Views 857
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

You can use a CSS media query to only display it on larger screens

 

@media (min-width: 768px) {
	/* Your code here */
}

 

👨‍🔧👨‍💻 Contact me for development work - I’m a Freelancer Software engineer, Architect, and Designer UI/UX

🙋‍♂️ Squarespace Custom Web Development & Design

📅 Manage Tasks, Take Notes, and Upload Related Images

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 200 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

 

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.