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!
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!
Thanks, this is what I needed
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.