Feedback Survey Project

Code Feedback
1

Hi everyone!!
Below you can find result of the first projec I’ve done from responsive web design projects. I would be great to have your feedback to improve for next project.
I really didn’t take much time for different options.

Thanks a lot!!

2

All were really good awesome

3

Welcome to the forums @ramon.rp. Your form looks good. Some things to revisit;

  • 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 CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Make your page responsive. Remember, the R in RWD stands for Responsive.
    • On smaller screens elements fall out of the container.
4

Thanks for your feedback!!

5

Hi Roma!
Thanks for your welcome!

  1. code revised with validators and corrected.
  2. This problem of elements failing out of containers need media query to solve it? or it just my CSS as it is have some mistake.

Thanks!!!

6

For something like a form you really don’t need a media query as long as you use relative units for widths. Which you did.
What you have to remember is that if you have a container that’s small when you add something like margin things may tend to overflow on smaller screens.

For instance, your form has a width of 50% and then for fieldset you added margin: 0 4rem; That’s okay on a desktop but when you shrink down the form with cannot contain it.
If you remove the margin from the fieldset everything is contained on a smaller screen but on a larger screen the fieldsets are pushed against the form.
If you leave the margin within the fieldset but increase the width of the width of the form to 70% then it looks good for both larger and smaller screens. (Yes I picked a bigger width than necessary. You can probably find one that works best for you.)

One thing to remember is everything you see on a webpage is just a box you need to move around and resize. You can try adding this at the top of your CSS to see how things are set up on your page;

* {
  border: solid 1px red;
}
7

Thanks a lot for explanation!! Totally clear now how to make it responsive.
My final solution:
I let form width 50%.
I change width of fieldset to 90% and added margin: 0 auto; to center it inside the form tag.

Thanks for advise about border. Normally I add borders in different colors to have an idea about what Im doing. It what works for me in order to know what is happening.

1 Like