Role-Playing Survey feedback

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.


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.

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?

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.

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.

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!

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.

1 Like

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?

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