Symbol - CSS Toggle Switch

Symbols
1

I have two layouts: 320 px to 414 px and 414 px and up. On the first layout, a CSS toggle switch was placed and converted into a symbol. The switch uses the CSS file (loaded in the Head) and relevant HTML from https://ghinda.net/css-toggle-switch/

As viewed in the responsive design mode in Safari, the switch in the first layout works. When I created the second layout (414 px and up), the symbol carried over but its function as viewed in the browser has not. As a test, I created a new file by deleting the first layout. In this edited 414 px and up layout file, the switch works.

There appears to be a conflict with the symbol? Can someone point me in the right direction? Examining the CSS in the development tools has not helped me solve the problem.

Thank you.

CSS Toggle Switch - Both Layouts.hype.zip (31.8 KB)
CSS Toggle Switch - 414 Layout.hype.zip (19.1 KB)

2

Hey, it’s very important to put all the things together in the right order…
First, create your group of content and give them a unique ID: Group - Difficulty Selection
Secondly, create a persistent symbol from your selection
They will spread now over your different layouts.

Afterwards you will run in problems with Unique Element ID’s.
They have to be - unique as the name says.

Cheers

CSS Toggle Switch - Both Layouts.hype.zip (25.0 KB)

3 Likes
3

Thanks, Olof!!!

1 Like