I just finished the second responsive design project. For this project, I did mobile-first design following some guidelines from w3schools. It was pretty tough, but I am pretty happy with the way it came out.
Here is the link to my survey page on codepen. As I am fairly new to the web dev game, feedback on the code itself or any feedback would also be greatly appreciated.
Thanks for reading. Happy holidays!
Update: Fixed the footer issue @RadDevDad pointed out. I actually ended up simplifying the code slightly as a result.
Update 2: Fixed the grid issue on Chrome. (It appears that css grid doesn't work in fieldset in Chrome.)
Love it! My only suggestion is that you change the background on the footer on a desktop site.
On a mobile view it looks perfect but it blends into the background image on a desktop view.
Good job on this project and kudos on the section where you enter dates you can’t attend. I’ve never seen people use the date as a format and only allow a part to be edited, looks lovely!
Thank you for your kind words.
Good catch! I’ll need to fix that up. Thanks again.
Bumping the post in the hopes of getting more eyes on the code. I apologize if this is not an acceptable behavior.
There’s an unknown property in your footer. Codepen provides a way for you to validate your HTML, CSS and JS. Click on the arrow in the upper right in each of the sections and then click on the respective ‘Analyze’ link.
For that unknown ‘border-width’ property check this link to see how to incorporate it correctly;
English is read left to right so it seems odd to me that the Work Hours questions are off to the right on a wide screen. Correctly aligned to the left on medium and smaller.
Page looks cool.
Thanks for your feedback!
Yes, I had
border-top-width instead of
border-width-top. This has been fixed.
The work-hour issue you pointed out is not an intended behavior. It seems to creep up in chrome, but not in firefox or safari. I think I missed it because I have been primarily using firefox for testing.
I’ll see what I can do to address that.
I fixed the issues you addressed here:
It seems like
display: grid does not work for
<fieldset> on Chrome. I was able to fix the issue by putting a
div around the work hours and setting the
display attribute of the
div instead of trying to directly messing with
That looks good. I didn’t know that about grid and fieldset either.
I dig those rounded rectangles.
I noticed that in places the text is too close to the edges of the containers. I recommend some adding some spacing.
Why does the background image disappear in mobile view?
Great job on the responsiveness! I know that it is a lot of work.
Thank you for the feedback! Yes, making the page responsive is challenging. I found the mobile-first approach very helpful in that regard.
I agree with your feedback—I definitely see the need for some padding, like here:
Regarding your question about the background image, it’s just my personal taste. I feel like a complex background on a tight screen doesn’t look very good. There doesn’t seem to be enough room to make out what is going on in the image. On larger screen, there is more room to actually see what’s in the background.