Hi everybody. Can you please tell me what you think about my survey form project?
thank you in advance!
https://codepen.io/eleonoralbasi/pen/OrXRom
Looks great! Very clean, and easy to understand. One thing, though – and not a negative, simply another way to tackle the same problem:
The form element can function as a block-level element, and you’ve set it up with a two-column format, using two classes: first-column
and right-column
. And that works. But something similar could have been done without needing to create custom classes for the purpose: a CSS grid layout. If you had defined the form like this:
form#survey-form {
display: grid;
grid-template-rows: 50% 50%;
...
}
Then, any block elements within the form would be placed left-right-left-right in a two-column layout, without needing classes.
To read more about using CSS grid layouts, take a look at https://css-tricks.com/snippets/css/complete-guide-grid/
Looking great!
If you’re looking for feedback, here are my 2 cents:
-Make it so the form displays correctly in small screens: maybe add a media queria for max-size ~600px
-This one is just personal taste hehe. The submit button looks rather “defaulty”, maybe remove that border or add a new one to go with your style?
Keep it up!
Thank you very much for your feedback!
I changed the design of the button to get it closer to my style, and make the page more responsive.
I am still trying to understand better the media queries…
Hey that’s way better! The button’s color made all the difference! And the form looks awesome in my phone’s screen now. Thanks for sharing
It looks good for the most part, but there is a little bit of overlap when the screen is shrunk down to around 680 px. You might consider another media query.
Please take a look at my product page
It looks clean and nice I liked the background color used.
Looks great to me, I couldn’t reach such a level yet. The design is simple and stylish at the same time, I like it. I love to wonder travel sites to seek an inspiration to create a similar project, but my skills are not enough yet.