[Build a Survey Form] Cannot get the form labels and input boxes to appear on the same line (using media query) when viewing on mobile

1

Hi all,

This is my project:

When I am viewing it in a viewport of resolution 360px width by 640px height, in google chrome, I cannot get the <inputs> and <labels> boxes to appear on the same line, like they do when one views the web page on a standard desktop/PC screen viewport.

I have tried to shrink the size of elements’ fonts, as well as changing the sizes of the <inputs> boxes, to see if they fit next to the labels, when viewing the webpage through a viewport of resolution 360px width by 640px height. But that didn’t work.

I am trying to search on Google for a solution to this, but I do not know what variables and terms to search for online in order to find a solution. Hence I am posting this very wordy post in the FCC forums.

Could someone please help me out with some info on how to go about making sure that the <inputs> and <labels> can be rendered next to each other in a viewport of 360x640, as they can on a standard desktop viewport?

2

Keeping those two columns aligned is going to be difficult. (It would also be really confusing for the visually impaired that rely on screen readers.)

Instead of having a column of labels and a column of inputs it would be better to have rows with one label and one input each. That way no matter what happens your label and input stay together. Fixing that will make keeping them on one line much easier and your page still makes since if that fails.

The real test is would your page make sense with all css removed?

3

Hi

I’ve done that - I have created a grid with 2 columns and 6 rows (currently all sized at auto whilst I get all the elements into the correct grid cells - the sizing and design will happen afterwards.

However, I am struggling to place the three <gender button> elements into the grid cell:

{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; }

Do you know how I can go about doing that? I have spent about 2 hours googling ‘how to place multiple elements into one grid cell’ and cannot find anything that can help me resolve this issue.

I have tried #gender-button{ grid-column-start: 2; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5; } (see the css code in the codepen link above)

but this doesn’t seem to be working. so frustrating!

4

Not sure if this is what you want, but if you give the gender labels and inputs a parent container they will be grouped. I also gave the labels and inputs the for/id needed.

<label id='gender-label' for='gender'>What is your gender?</label>
<div class="gender">
  <label id='gender-label' for='gender-male'>Male</label>
  <input class='gender-button' id='gender-male' type='radio' name='gender' value='male'>
  <label id='gender-label' for='gender-femal'>Female</label>
  <input class='gender-button' id='gender-femal' type='radio' name='gender' value='female'>
  <label id='gender-label' for='gender-other'>Other</label>
  <input class='gender-button' id='gender-other' type='radio' name='gender' value='other'>
</div>
2 Likes
5

thank you very much!

6