My pink Survey page (Flexbox)

Code Feedback
1

Hi,
This is my second project. I did yesterday it using flexbox: https://codepen.io/supuun/pen/wXpogE?editors=1100
Any feedback is welcome :slight_smile:
Also how can I make all thee text inputs to use same width. I can’t figure it out myself.

2

Mah dude! The design is great, love it so much. perfect.

Beside layout is working and functional, but I think this could be better, especially for mobile.

I suggest you go with less margin/padding from screen edge for containers in mobile view.

There is also some space between radio and its label text, I think the space is a little too much.

Good to take as template.

Keep goin on great work, happy programming.

3

If you manage to give same advance for text labels(name, email, number), so text fields will have same width.

Try a grid like layout for it, it works indeed.

4

Thank you :heart_eyes:

5

do you mean the purple stuff on the edges?

6

For instance check this layout which is kind of template for survey form just like what you did too.

Please don’t judge me by my design, I’m not UI/UX dev, but please see how layout is responsive and functioning for different screen sizes.

Hope it helps

1 Like
7

Also I can’t understand this part. What does advance mean. width? I’m not a native speaker, sorry. Also how can I set a paragraph tag or in this case labels tag width automatically according to the content.

8

Nice example. Doesn’t look that bad :slight_smile:

9

Yes, sorry. some devs call width and height advance.

Label by default is a text(inline) content, so browser gives enough space it needs. But seems one label (e.g. name) could be smaller than another label (e.g. number) , so the rest space for textfield will be less or more and it makes it no so sync in page layout.

You may use grid for this section, check this sampel for instance which is responsive and gives you the grid/table layout you need.

10

I have updated the radio button part and it works. But I can’t fully stretch the main tag horizontally with 100% width for some reason.

11

Looks much better now, great progress.

This is becasue body tag has some default margin value(8px I think).
Override it with zero and try again
body{margin:0}

Good progress, keep goin on great work.

1 Like
12

Thank you so much. :blush: Larned a valuable lesson. I should really consider using normalize.css