My survey form - I need feedback on accessibility, mobile-friendliness and code

The link is here: https://codepen.io/lvl-6/pen/mdmxjgK

I think that my code (at least my CSS) is a bit wasteful/inefficient and could be tidied up.

I’m also having a problem where if I change the size of the radio/checkboxes (to make them bigger for mobile users), it doesn’t push the other items up/down, it just goes on top of them. Increase the transform property at the bottom of my CSS to see what I mean. Is this to do with me not setting the position property? I’m always confused by position for some reason.

Another issue I’m aware of is that my checkboxes don’t line up. I assume this is a flexbox thing, I just can’t remember what I need to do at the moment.

Any other issues, let me know and if you can, a suggestion on how to fix it and/or best practices. Thanks!

Looking good.

Using the ‘analyse’ code feature for your HTML does bring up some errors though. You’d be best to look into these first.

For further help on the HTML I would advise copying and pasting all of your code into The W3C Markup Validation Service. This analyser is much more effective than the built in codepen.io one!

Other than that - looks good!

Thanks, this is what I needed :smiley:
So as it turns out, I have closed all my labels in the radio/checkbox sections with </input> LOL
I would have never noticed that.

It’s exactly the same trap I fell in too!
It feels natural to close the input like that!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.