My first survey. Would love feedback

hello :slight_smile: well done on finishing this project, bravo :clap: but some ui discrepancies are visible!!

backgrounds position is shifting based on “window size”, maybe its something you might want to look at

radio buttons, checkboxes are also loosing its positions in similar situations

same is happening for submit button element

happy coding :slight_smile:

1 Like

@bappyasif, thank you soooooo much for your feedback! I really and truly appreciate it!!!
I’m so glad that you’ve pointed out about the position shifting cause I had no idea why it wasn’t responding well to different devices. You really saved me lots of work figuring it out so I cant thank you enough, I literally have no words :smile: :heart_eyes: :star_struck:. I tried fixing it but I’m not quite sure how to go about it if anyone can point me in the right direction I’d very much appreciate it.(I already changed the width from pixel to percentage but that didn’t go over very well so I’m kinda confused).Again thank you so much for your help, your answer really helped me a lot.

1 Like

A few suggestions.

On the first, second, third, and fourth divs, use auto side margins to center them and then set a max-width (perhaps something like 35rem) to keep them from getting too wide. This is a very common technique for centering block level elements.

Don’t set the width in px on your inputs. Perhaps use percentages instead. That way they will adjust as you narrow the view port.

1 Like

Thank you so much. That worked really well and its all fixed up now. :smiling_face_with_three_hearts: :hugs: :smiling_face:


you keep using

margin-left: 0
margin-right: 0

that basically means the same as

margin: 0 auto;

so use that instead.

Also, in css it’s enough to have only one 0.
this means that margin: 0 would cover top left bottom and right!

and also, if you see that you’re using something over and over, rather wrap everything in one div, give it a container class and use that property just once.

In upper left corner name your pen, so it doesnt remain untitled.

1 Like

also it seems you have a font issue.

font-family:cursive

nope. cursive is definitely not font family.
but also doesnt seem like normal one is set.

Thanks for your feedback I really appreciate it. :hugs: :smiling_face_with_three_hearts: :star_struck:
also which font is being used if cursive doesn’t exist?

cursive is not a font.

it’s something like a set of fonts, like species of fonts if you’d like - in biological terminology.

I’d encourage you to add font only once and to the body - nowhere else.
Everywhere else - just delete it.

Do more with less!

whole web page should have really no more than 2-3 fonts max - one for titles, to be distinguishable from rest of text, and other, normal.

here , I entered my favorite web font Playfair Display in head

@import url(https://fonts.bunny.net/css?family=Playfair+Display:400);

and just called it in body , with font-family

you can pick whatever other font you like and try doing similar.

1 Like

I tried setting the font in the body but whatever family I set it to it isn’t making a difference and it’s still staying the same:
Screenshot 2023-08-14 125215
Screenshot 2023-08-14 125224
Thanxs!

but that’s probably because you didnt include any link from any online font, on google fonts or on bunny fonts. doesnt matter where from. it’s important to have link.

1 Like

Hi there, I want to say well done on finishing your project , just a small suggestion to improve the accessibilty of your form : make sure that the for attributes on your labels and the ids on their respective inputs have the same value so that when a user clicks a label the browser will automatically direct him to the respective input.

<label for="first-name" class="label" id="name-label">Enter Your First Name: <input class="input" placeholder="First Name:" id="first-name" name="first-name" type="text" required /></label>

improve email validation by adding a pattern attribute so that the user enters at least an email with @ in it

pattern="/@/"
1 Like

Thanks for the help :hugs:.
if I download a font from google fonts how do I use it as a link?

Thank you so much. I missed that…
gonna fix that now.

1 Like

there was a task which was part of freecodecamp learning that taught how to get web fonts from google, and use them.

I found it. Thank you so much!!!

Thank you everyone for your feedback :smiling_face_with_three_hearts:. I’m working on fixing up my code and I’m stuck with two things. First @diomed , if I set margin to 0,auto will it affect my left/right margin and also how do I give something a container class?(Sorry for my slowness, I’ve allready spent forever trying to correct my code but I keep getting stuck :thinking:).Second I keep switching fonts because I want something anime style but then the text spreads out and keeps moving to the next line in a smaller screen size so does that matter or should I stick to a regular font? Any suggestions on a anime font which might look good will be very much appreciated cause I’m desperately struggling with that issue.
which looks better:


or:

Also how do I fix this issue?

thank you all so much :smiling_face_with_three_hearts:

you’ve already given so much classes to so much element, adding container class shouldnt be a problem.

if you set margin: 0 will it affect your left - right margin?

  • dont ask me that but test it and see what happens.

here’s how people code if they are unsure

  • they put existing code in comment [so they comment out that code]
  • they write new code. - if it’s good, existing code can be deleted.
    if it’s bad, you always have something to go back to.

Anything looks better than comic sans, which should be used in web design ONLY when making web pages with content for kids.

You have CSS window.
This is CSS
@import url('https://fonts.cdnfonts.com/css/manga-temple');
unsure why you’re putting that in style tags in html, when you can put it as first line in CSS window

Chuckle :laughing: yeah… I got your point and switched my font to something else. I’m still not thrilled with it but its impossible to choose a font style with so many options available(I allready switched like 100 times). Thank you for your advice, the bottom/top margins actually did change when I did the 0,auto change so I left it at that. I’m kinda fed up with this project allready so I’m gonna leave it as its now and maybe get back to it at a later date. This is the edited version: