Strange Problem With Responsive Checkboxes

[dpagek]

I’ve been working on a fairly simple form. After looking to customize the checkboxes, I found a few answers people had given. I went looking at example sites and came up with something that seems to have worked-

Putting checkboxes behind the label layer, adding a border to the label, and putting a colored div over that. The interaction I have set says that when you click, the div goes to full opacity. On second click, it falls back to zero.

The problem I am having is that only the first two boxes work properly. The last two seem to only want to change the second box (?). I’ve tried a number of things, including doing a separate div with new class, separate label with new class, and a separate interaction. It is causing the same issue.

On a less important note, another issue is that the buttons change spacing when viewed online. How can I fix this?

Can anyone help? Links below (don’t mind the design- it’s a work in progress).

http://handsforhire.webflow.io/get-started

https://preview.webflow.com/preview/handsforhire?preview=9f5b2447f12235d463403514aa489d92

Thanks.

[dpagek]

Anyone think they might know what is wrong? I’ve been trying to no avail.

[cyberdave (Dave S.)]

Hi @dpagek, I am still taking a look at this, but I think the issue is in the styling on the the elements themselves, not so much the interaction.

See this image if I move the checkbox wrappers out of the columns, notice how they all seem to layer on top of each other ?

There was also some strange styling on the columns, so my suggestion is to simply the styling on the elements, so that each div with a checkbox is completely cleared of every other checkbox.

When using absolute positioning and offsets, this can get in the way of your columns and thus I think the issue is happening:

I am still taking a look in order to make some alternate layout suggestion