Issue with custom code pointer-events

Design help General
1

I have a slider that is under the grid-div. First, I can not click or drag the slider. So I add the custom code [pointer-events: none;] to the grid-div. But I still cannot click or drag the slider.

Can someone please help me with this issue. Thanks in advance.

Here is my site Read-Only: Webflow - Nhan's Portfolio Website

2

Cool site, Khue.

  1. The left and right buttons seem to work for me, though i don’t see any buttons to click to do it.
  2. If it has to do with touch device swiping, then you’ll have to test on your device as you develop it. It seemed to work for me when on my iphone.
  3. be careful with adding a pointer-events: none; custom code (which must be in your sitewide settings [which is where it should be :wink: ] because I couldn’t find an embed to double check the code) it can quickly prevent you from making changes, but you likely knew this already.

Add some more details to describe what you’re having trouble with if you can. Cheers!

3

Thank you, Lux. The side is on the progress. It’s the first site I make ^^.

  1. I added code into the Home page setting, not my all-site setting.

And I notice that if I target pointer-events: none; with the ID of Grid-div, it works well. But if I target pointer-events: none; with the Class of Grid-div, it doesn’t work. Oh man, It’s hard to handle all things with little experience of css/ html :smiley:

4

You’re doing great, Khue! Check the HTML source that Webflow outputs and you’ll see that you can target the classes that are generated usually since most are prepended with an w-. For example, were you to name a class pointer-events-none, most likely Webflow would create a rule using w-pointer-events-none.
Good luck, and welcome to Webflow!

5

Just incase anyone else drops by this thread who’s struggling (as I was, and couldn’t understand why)…‘pointer-events’ seems to only work for ID’s, not classes (unsure if this is a Webflow thing, or generic code thing).

So, give your div an ID (in the Element Settings tab - currently 2nd tab on right (2022)), and then place the following inside your head tag in the page settings (or as Lux said here, in your sitewide settings).

<style>
#GIVEN_ID {
pointer-events: none;
}
</style>

(Use a ‘#’ instead of ‘.’ to target the ID)

Hope that helps someone.

6

Legend sir. Thanks for the follow up. Was helpful.