Last time, I struggled with the CSS for my first project.
This time, I seem to have improved my CSS a bit.
I added media queries to make my page more responsive. I viewed the page on different screen sizes using chrome developer tools. The page looks good to me.
I still would like to hear from you.
Heres’ the link to my Survey form.
Please share your thoughts.
Hi, I love your project.
It’s really amazing.
First and foremost, I came from a UI/UX designer background, and in my own opinion, it would be more amazing if you declare which field is optional, and which field is required (not just the age’s field). In HTML, you can use <small> tag.
Or if you want, don’t declare it at all, until the user made some mistakes and finely the website gives some warning (not recommended).
Finally, you are doing great. Keep it up. Keep learning. Happy coding.
Thank you so much. Your comment means a lot to me.
Your form looks okay @naveennavy219 but looking at the code it looks too much like the sample code.
On a side note, do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
@Roma
Thanks for your feedback. Yeah, I admit that I’ve included some code in my project from the sample code. I only took the names and added them to my project. I did the CSS Part myself.
Howdy.
It’s great you pinpointed that you’re pushing for responsive design.
I think a good thing to try also would be to think about using percentages when developing.
So you used width of 50% for the form container. That’s all well and good until the screen size gets quite big. I can view it in just about any size as I use a 49" monitor but I think the form becomes too big even on a 27". And then you use a media query for 80%.
How about removing the media query completely and doing this:
.form-container {
width: 80%;
max-width: 540px;
}
Add some min-width if you want to test that but I don’t usually bother. Although you could argue that on some tiny display this might be necessary as 80% would be too small.
Griz
Thanks for your comment. Firstly, I learned a new technique from your comment. I am glad you pointed it out. The reason why I went on to limit the ‘div container’ width to 50% is that I read an article on the internet that said try to fit your page content in the screen size as much as possible so that the user doesn’t have to scroll to right or left to view the content. Please correct me if I’m wrong.
I made the required changes.
Please take a look at my project once again
Limiting is the right thing to do. But a % doesn’t limit it ultimately, it just allows for the view-port (browser window) to size an element by the set % of the total view port (or the parent container width). It can grow infinitely (so not a limit) depending on the viewport width.
The suggested method I put above does a few things:
Allows responsiveness for the form if the screen is smaller than 540px. Coincidentally I also thought (eye measuring) that 540 seemed to fit the form dimensions in an optimal amount = Limit.
If the screen is smaller than 675px then the form will be 80% (540px is 80% of 675) of the screen = Responsiveness if the limit doesn’t have to be met.
So the article is correct as to the page CONTENT. But not necessirely every element. For example, you wouldn’t (shouldn’t) stretch a button to be like 1000px wide. That is simply unnecessary. Elements have their corresponding sizes (as designed by UI/UX folks) for a reason.
Directly referring to you pointing out the article/something you’ve read: You shouldn’t stretch content too much because imagine it from a perspective of a wide-screen user. You don’t want them to turn their head from the left of their display to the right just to read something. You want them to stare at a single point of their screen (lets say a max width of 1440px or something to that effect) and just scroll whilst moving their eyes a bit.
My initial suggestion was almost purely CSS related but I see we sort of ended up in the UI/UX area 
.
As i suggested you could always have a min-width: size. A 100% form of a 200px display for example wouldn’t really be functional (i’ve no clue if such tiny displays exist but incase they do you could very well code for it so the user has to swipe their screen to access the right portion of the form).
I hope I made some sense.
Small suggestion. go to apples website and look at how they only stretch images massively across the screen, or impactful headings. The main chunks of content for any product will always try to be centred and will always be of a relatively digestible proportion
G
It still looks too much like the sample code.
Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.