Survey Form - would appreciate your feedback

Code Feedback
1

Hi Everyone,

I must say I was absolutely terrified to get feedback on my first EVER project (Tribute Page) but after getting over my own insecurities I am SO grateful for the wealth of knowledge and understanding I gained from going through that process, and so I welcome your constructive criticism. :slight_smile:

Please advise on my form below.

https://codepen.io/Chelstar/full/yLJRzXO

Thanks so much for your time in this regard!

2 Likes
2

Hey @Chelsey
I like the font and color and bg image.

But in iPad screen is not good. Please check to it.

That’s my feedback.

Thanks and Happy Coding!

1 Like
3

Thanks codely,

I will revisit this, I did struggle a bit in this area initially but I will see how I can fix this for you.

1 Like
4

@Roma Please would you be so kind as to provide your feedback here.

Also, my last two media queries are a bit of a mess as I was trying to make it responsive for iPad (as per comment above), I have been reading up and trying to amend values but it doesn’t seem to want to make a difference to the appearance in iPad mode…?

Thanks!

5

Hello @Chelsey,

  1. The form on the laptop screen looks good.

  2. As I shrink the width, the form doesn’t fit as one would expect.

  3. And again, the page again looks good on a mobile screen.

Let me tell how would I make the adjustments.

  1. The div with the class of red-background has a huge horizontal margin of 740px, this can cause a huge problem for the viewer, this is because on medium screens, the actual form will be very few pixels to accomodate the large margin.
.red-background {
    margin: 20px 370px;
}

What I would do is set the horizontal margin to auto, and set the width to approx 75%. It would look like this. Again this is my personal preference.

.red-background {
    margin: 20px auto;
    width: 75%
}

I would set the horizontal margin for .red-background to auto for all screens. I would specify the width of the container.

  1. I would avoid using !important for css selectors often.

Thank you.

1 Like
6

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

  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.

For what you have now (until you make your own)

  • There’s a horizontal scrollbar on large and medium screens
    • Since you’ve referenced the sample already, notice that there’s no media queries. On a page like this if you use relative units (em, rem, percentages) you shouldn’t need one.
7

Thanks so much for your feed back I will look into this, and noted for moving forwards.

8

Hi @Roma

I will amend this section :smiley: and have noted your comment going forward.
I will revise the relative units here as well.

Thanks!