Here is my finished survey form. Admittedly, I probably spent too much time on this one but I had a blast playing around with CSS, tyring to get the hang of it.
Let me know what needs fixing and how I can clean up my code!
Thanks!
Hello Chad,
Just checked your work, looks very good. The design is good!
There is a very small issue about yourlayout. I see you set the main tag width as width: 90%; for desktop, and width: 95%; for tablet/mobile.
So let me give you a fact
Fact: By default, even width:1% could overflow! but why?!
By default, browser add border-width, padding and margin of an element to specified width value. So this is possible, your 95% width + (margin+padding+border-width) overflow which did, please check:
Please note the horizontal line!
Please note, in a 32" screen, that 90% form width could be a little too wide!? So what about remove the width and have a max-width:10in instead?
Fix is easy, you tell the browser that include the margin, padding and border-width with target width size specified using box-sizing:border-box. Add it to your .container css rule.
I suggest you add some more spacing between radio buttons for mobile view, this could be helpful.
Same try to style the horizontal line you added, they are not very visible! Use darker green colour for them I suggest.
you applied border-radius for comboboxes, but textfields and textarea come with no radiused border, I suggest sync the style between them.
One bad issue I found is about you tried to control(enlarge probably) the textfields by override their height value, please don’t.
Using padding is recommended, just remove that height, and apply a padding like padding:0.4em (don’t use absolute unit for this)
Using long text for titled border (fieldset) may not be very good, but I suggest you add width:75% for your border title(legend) and try it.
And I see no any specific issue with your work, and I would say it’s a great work Chad, you did a good job.
Keep going on great work comrade, happy programming.
1 Like
Hey NULL_dev,
Thanks so much for the feedback! I went ahead and implemented the changes you recomended. Your suggestions were easy to understand and really did add to the feel of the overall layout.
However, I wasn’t entirely clear on your first suggestion, after digging through some videos and MDN, I have a slightly better understanding of what “box-sixing: border-box” does, but when I put it into the .container rule I didn’t notice any meaningful changes.
Hopefuly that implies that the page was already functioning as intended and not that I just totally misunderstood your comment.
Thanks again!
Let’s review it again, as I mentioned
This is possible in your browser and set up, you won’t get any layout break in default behaviour (no box-sizing), but some(including me) could take the issue, since I have global zoom config, same larger default font-size.
As far as you got the usage the box-sizing is great. testing UI/UX is hard sometimes. You (are lucky) should be very happy that you are working with a modern era of web designing. I remember when devs code for IE6. You jst need try it once to understand what I mean.
keep going on great work, happy programming.
1 Like
Ah, that clears things up, I forget to not assume that everyone is using the same 2 browsers.
I’ll make sure to remember your suggestions.
Thank you!
Great, also note setting color for hr tags may not work. Color usually affect the foreground content which hr comes with any.
Ifyou like to do it as CSS, you may override the default 3-d like border, same fill the background-colour with the same color you set for border, e.g.
my_hr{
border: 1px solid #00760d;
background-color: #00760d;
}
Another old-school way is using color attribute of hr, e.g.
<hr color="#00760d"/>
Good update, great progress. You will be one good UI/UX dev Chad.
1 Like
Noted and changed! I wouldn’t have ever thought of that, thank you.