Hi Guys Just finished the survey form

Hey guys i just finished the survey form…please check it out
And give me some feedback PS advice if u got any
Heres the Link: https://codepen.io/thee_joel/pen/vwemEw

@Jowie I like the fact that you have added images to your form. I should have done the same.

  • I do not reccommend setting vw for the font size. The font will shrink and grow too much depending on the screen size.
  • You need to fix the design for mobile view. Here is a screenshot at 620px width.

    Items are not centered, some elements go off the page.
  • This text “Please Fill The Form And Let Us Know How We Can Improve…” is getting covered by the images.
    Other than that, nice page. Keep up the good work.

This is my dull design survey form . Look at the code. It may help your fix yours. It is responsive and I did not using media queries.

@brandon_wallace thanks man…totally forgot about mobile view…let me try to fix it and i will get
back to you

Hey @brandon_wallace . i took your advice
check this out and give me some feedback. https://codepen.io/thee_joel/pen/vwemEw

@Jowie Very good! Much improved!

I noticed this:

  • the description id is shrinking too much on smaller screens.
  • you may not need a media query for a design that rests in the center. Here is my survey form. You can look at my code.

You did a good job on the survey form.

2 Likes

It is tiny on mobile. To fix this, go to pen settings -> html -> Insert the most common viewport meta tag -> Save & Close.

@brandon_wallace I see you haven’t done this to yours either, and I would recommend doing so.

Comparison between with and without viewport tag:
Without it:

With it:

See this post to see how to test a pen on mobile.

2 Likes

nice job, @jowie!
I personally think that you have too many dashed borders and that there shouldn’t be a big image at the top. The image you put there makes the page glitch. If you still want to put it there, let the form slide over it by using the z-index css command.

1 Like

@Steffan153
Thank you my brother. Since I do not add the ‘head’ section to my Codepen pens I forget the viewport meta tag.

1 Like

thanks bro. i’ll definitely do that

hahaha same thing happens with me