FCC: Survey Form - Help with responsive alignment

I have my survey form mostly working the way I want, minus final content. However, I am having a hell of a time sorting out how to keep the labels for my text input fields aligned with their mated input boxes when the window is resized .

The rate at which the label shifts as the window narrows is much faster than the rate at which the actual inputs shift, making them out of alignment rapidly. Grab the right edge of the window and pull it in to see the issue, while visiting my form.

My pen project is here: My FCC survey project

I highly suspect I’ve got larger structural problems, but I am just not far enough in understanding to sort it all out yet; and would appreciate some review/help from the crowd.

Thanks!

Hi,
Welcome.

Yes you need to structured it.
My approach is wrap the label and the input with a div.

<div>
  <label>...</label>
  <input>
</div>
...

Ok; thank you. I’ll play around with that; appreciate the look!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.