Hello every one!
Here is my survey form:
Free code camp -A Survey Form (codepen.io)
My problem is that the form is not responsive in mobile devices.
I don’t want to use JS or any frameworks and libraries, and I know my code is not so clean right now.
I’d be happy if you say any recommendation to make it better and solve the main issue.
Thanks a lot
Ehsan
Can’t you just lower the max-width a bit? I don’t think supporting anything below 360px is really all that relevant.
I get what you are doing with the radio buttons and it’s a fun idea, I’m just not sure about the accessibility of it.
I’m not sure the way the table is structured is correct for screen readers, although I must admit I haven’t really looked into it much. I think the left column should have th elements and you might have to use the scope attribute. Not even sure if using a table like this for a form can be made correctly accessible.
Thanks for your response,
For max-width, I did it but nothing has changed. Actually I know the table is primitive and at the beginning I thought the problem could be the table, so I commented it but the issue is still here.
Did you try just lowering the max-width on the #boxcontainer element? Something like 360px.
I’m not saying it’s primitive, nor am I talking about the responsiveness. I’m saying it might cause issues for people with screen readers that need the page to be accessible to use it.
What exactly is “the issue”.
I know it is not related to the post I don’t know if it is ok if I post this, but I have a question
A lot of people in India use a phone called JIO PHONE 2.
It is 320 pixels wide and 240 pixels tall.
It is tiny but has a browser and you can use youtube on it.
Should I let there be a horizontal scrollbar or write code for that size?
Thanks!!
Hey awesome website!!
Add a max-width on the textareas(and also on the inputs IF YOU WANT TO, so that they can’t overflow their container and the user can’t drag the textarea beyond the container.
Yes, I do it for in media query for #boxcontainer right now and it is slightly better.
I would say it’s just a judgment call you will have to make on a case-by-case basis. I usually do try to have the design work down to 320px.
I’m just saying for this project it might not really be worth it if it means they have to recode the table to work on such a low screen resolution.
But yes, in general, I would say if you can make it work at 320px you should probably do it.
Sorry for my bad English, the idea of table in form was from a template but I believe that codes for that form was much mor complex than mine.
Nice points, thanks I will consider them.
Definitely some accessibility issues with those radio buttons in the table. None of them have accessible names. They should probably be in a fieldset/legend. Nothing against trying something new but there is a reason that best practices and established patterns should be followed for the most part.
I think you can still make this look like a table layout if you want but not use an actual <table> for the HTML.
thanks for your help.
I do some changes with max -width and padding of table so my responsivity of form has been solved, but I don’t understand what is the accessibility issue?? could you explain please?
thanks a lot.
thanks so much, my problem is solved with your points. 
For starters, id’s must be unique on the page. You are using the same id for all the “leaders” radio buttons, and all the “tents” radio buttons, etc… Second, your <label>s don’t have any text in them so they aren’t doing anything. Third, radio button groupings like this should really use a fieldset/legend markup. If you don’t want to do this then the <label> for each radio button is going to need to be a lot more descriptive.
If you have never used a screen reader then I understand that you might not be familiar with all of these issues. That’s why it is always a good idea to follow best practices.
Another issue I didn’t even mention. You have turned down the font size to 85% in order to make the text fit in the table. That is not a good idea. A lot of people won’t be able to read it at that size and will need to manually crank up the font size. If I do that and then start narrowing the browser the table breaks out of its container.
Oh okay
I didn’t get you, do what?
Thanks!
Thanks, I almost get it, I didn’t know about fieldset/legend markup, I will read and try them.
Sorry, I’m new comer where can I find these practices?
That’s right I’ll be check and change it properly.
The same place everyone else can, google it 
Here’s one to get you started.
fieldset was introduced in this lesson. It applies to more than just radio buttons. You can search and find additional info.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.