Make HTML Form Responsive-CodePudding

I am unable to make this HTML Form responsive. It looks fine on desktops but not on mobiles and tablets. Here is the link to the code:

JSFiddle

I have tried removing body's overflow: hidden and white-space: nowrap; and using different types of col but it does not work. I think my stack class and padding in some places is causing the problem but I am unable to fix it.

CodePudding user response：

It seems like you're making forms just with HTML. Maybe try to use bootstrap form https://getbootstrap.com/docs/4.0/components/forms/ . It will be easier to make forms responsive.

CodePudding user response：

CSS media queries are the basis of responsive web design. Try something like:

div {
  height: 200px;
  width: 400px;
  outline: 1px solid black;
}


@media screen and (max-width: 767px) {
  div {
    width: 100px;
  }
}

<div>
  Hello World
</div>