Survey Form Project completed

Code Feedback
1

Hi all, I’ve just finished my Survey Form Project if anyone would like to take a quick look at it.
All my tests pass and I kept it simple.

I think I’ve fixed my text sizing issue.

I did not specifically design for any particular size this time around, since it was a straight forward form. So no use of @media queries.

https://codepen.io/LetsWorkThis/pen/bGdPwBR

Please advise.

2
  • You’ve accidentally got two labels for the Front-end Projects checkbox
  • I know it doesn’t seem like this page needs a media query breakpoint, but if you narrow your browser all the way down I think you’ll agree with me that it could use one. Basically, at narrow widths, I would get rid of the width on .container-survey and if you still feel you need some side margin then make it very small (maybe 1em). This gives you more room for your content so things don’t feel so squished together.
  • Don’t use a percentage to put a width on the select (and don’t use ‘px’ either). Use ‘em’ instead, that way it grows as I increase the text size. Currently, using a percentage, when you narrow the browser the width gets very small.
  • Submit button width should also be in ‘em’.
  • Make the label for the select display: block;. That way the select always stays completely under the text as you narrow the browser.
1 Like
3

Hi and thanks for the input.
Code adjusted.
I know you mentioned about not using the ‘%’ for width, but I took it out and was noticing that the box was pushing out of the frame on small screen. So I put it back in for 2 areas and shortened the width so that the words still fit and the box auto adjusts unless the screen is really small.

I am perplexed though on why some fonts get larger when I shrink the screen vs other fonts.
I’ve changed the font style and that is not the solution.
I’m using ‘em’ for all the sizes. It seems strange.
It seems like it is only happening when I use ‘dev console’ to shrink the screen on sizes, since I don’t see it happen when I manually pull down my browser screen. Likewise, when I do a zoom in/out on my browser it works just fine as well.
Anyone have any input on this.
Thank you,

1 Like
4

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

  • When using codepen it only expects the code you’d put within the <body> </body> tags in HTML. (No need to include the body tags). For anything you want to add to <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • Since codepen provides the boilerplate template it already know where the CSS stylesheet is
  • Don’t use the <br> element to force line breaks
  • Don’t use in-line styling (style="font-size:14px") All your styling should be external
  • Make the cursor a pointer when hovering over the submit button
5

Hi there,
Thanks for the input. All suggestions looked into and understood.
For any inline styling I had, I changed it to use the ‘pre’ tag and then used CSS to style it from there. Seemed to work great.