How to make forms responsive

1

I just started my second web design project and I have run into a wall. I tried everything thing I knew to make the input element and the button element responsive but nothing seems to work. If I make the screen small enough it just squeezes out of my form element. Is there a particular method to achieve this goal? Can I achieve this with display: flex?

2

I’m not sure, what exact problem you have, but here are some tips to start:

  • form is block element - takes full width of the parent unless otherwise stated
  • both ‘label’ and ‘input’ are inline elements - behave just like text
  • button is a tricky beast - don’t trust it and always assign display value as it displays differently in different browsers

The holy grail of any responsive block element - this CSS pair:

max-width: 480px;
/* or any other width to your taste */
width: 100%;

Now try to make input, label and button to display: block; and apply holy grail :point_up:

3

Thanks for the help, it gives a big hint as to how I solve my problem