Role-Playing Survey feedback

Role-Playing Survey feedback
0.0 0

#1

Hello all,
Finished my survey page, and would like some feedback.
I decided to us CSS Grid on this one, since it seemed more practical and a good practice as well.
Still i don’t know when exactly should someone use CSS Flexbox or Grid. I don’t really like Bootstrap so i won’t focus on it for now.
I am not using Code pen anymore, so everything will be posted on GIthub.

https://f0rsakenc0der.github.io/Role-Playing-Survey-Page/

Thanks.


#2

Very stylish. This looks like it’s from a game.

A couple of problems I saw:

It looks a bit odd when you have the box lapping over the main area on a narrow screen view.

The required field highlight doesn’t show up very well.


#3

Thank you for that.
So what is the width you are viewing this then? is it 626px?
I can tweak it with a @media tag. What is the lowest res to look out for in general?


#4

If you use the inspector on Chrome or Firefox there is a small icon for mobile view which emulates different viewports. If you can’t find this let me know.


#5

Found it, i was looking for something like it, thanks.
Can you advise me what’s the best way to change from 2 column positioning to only rows, for everything lower than 640px? im kinda lost.
So the input fields be under their labels. If i keep it as it is i have to make the fonts really smaller and i don’t like it.


#6

Have a media query which forces each element to fill the width when viewport width < 640px.
I did a similar thing but used Bootstrap to do all the work!


#7

Hm i see, yeah yours does not contain any css.
In my case i have to remove the columns or make it 1 column for the whole page. Anyway I’ll make my research later. I’ll update soon.


#8

UPDATED.
Im done xD need to move to the next one.
What should i use for the product page, CSS flexbox, grid or maybe try bootstrap?


#9

Bootstrap it is easier to do layout for different viewports but it is just a case of adding media queries with the others


Create responsive survey form - rearrange 2 columns to 1 column with media query and min width