RWD Survey Form

Hello! I hope everyone is having a good day today. I have my Survey form project ready for review. Your feedback is greatly appreciated. Thank you.

https://codepen.io/jspiderhand/pen/LYEXdoV

1 Like

hi @Jspiderhand,

looks great,
i still wondering how to select the choices you provides.

@sobadrdb what exactly are you referring to? The checkboxes?

Layout is really good

1 Like

yep,
sorry my mistake, i opened it on firefox mobile.
turned out its fine on chrome. lol

@sobadrdb Firefox mobile? It doesn’t work on there? I don’t have it on my phone.

@PVN thank you!!

Hello there! Your page looks great. You might want to try to reduce the font-sizes a little bit to make it look even better, but that’s all. Good job!

Yep, can’t use the checkboxes on Firefox mobile

I think your page looks great and subtle and I liked how you put thought into incorporating music elements to emphasize context.

1 Like

@mphojele and @sobadrdb thanks for the feedback and the screenshot! It definitely helps to see that. I’ll look into the issue.

Update: I’ve downloaded FireFox for iOS and Android and the saw the issue affecting only the Firefox mobile (version 68.9.0) for Android. I found a beta version (77.0.0-beta.2) and tested the page there and the checkbox issue doesn’t show up in the beta version. With that said, it could indicate an with FireFox itself, but I will see what I can do on my end.

Update 2: I’ve made a few changes in my CSS to solve the checkbox issue coming up in Firefox mobile (version 68.9.0) and everything seems to be working fine now. I appreciate you guys for bringing this to my attention.

Your form looks good @Jspiderhand. Some things to revisit;

  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
    • There are HTML coding errors you should address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for HTML misses things which is why I recommend W3C
    • The one for CSS is good. Use it, there’s something to clean up.
  • Don’t use <br> to force line breaks or spacing. That’s what CSS is for.
  • The input areas are too small. Anything I type is getting cut off at the top and bottom.
  • Users should be able to click on the label to select, not just the radio button / checkbox.