Place button inside input form with flex

user_16513652 0
Viewed 237

I was able to get the form I want to have the button placed inside the input form but when as the screen size gets smaller the form and button don't stack on top of one another like they would if the button wasn't place inside the form.

Basically I want the button inside the form on desktop and stacked on top of one another for mobile. Any ideas? If I change the button position to relative then it can't be placed in form

Image of form on desktop

Image of form on mobile

.button {
  font-size: 16px !important;
  border-radius: 50px !important;
  position: absolute;
  margin-right: 5px !important;
}

#form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
}

@media (max-width: 800px) {
  #url-25 {
    flex-direction: column !important;
    align-items: stretch;
    width: 100% !important;
    padding: 0 20px !important;
  }
}
<form id="form">
  <input type="text" name="name" placeholder="text">
  <input type="submit" value="BUILD YOUR APP"></input>
</form>

flexbox forms input css html
2 Answers

A couple of comments here.

There is a url-25 in the media query but no url-25 id in the given code, and nothing changes the #form layout on changing the media size.

Also, there several !importants in the media query which appear to have no function, at least given the code in the question.

<style>
.button{
            font-size: 16px !important;
            border-radius: 50px !important;
            position: absolute;
            margin-right: 5px !important;
    }


   

     #form{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: end;
    }

    @media (max-width: 800px) {
        #form{
             flex-direction: column;
             align-items: stretch;
             width: 100%;
             padding: 0 20px;    
  }
        }
        </style>
<form id="form">
    <input type="text" name="name" placeholder="text">
    <input type="submit" value="BUILD YOUR APP"></input>
</form>

user_108674540

I have changed some properties in your code based on your requirement. Chcek the snippet below. The button will be inside the input on desktop and it will be stacked in mobile (Under 567px).

And a few changes I did in your code includes:

  • There was style for .button which wasn't present
  • There was style for #url-25 which was also not there.
  • Input submit changed to button submit.
  • Removed unnecessary !importants.

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
}

#form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

button {
  font-size: 16px;
  border-radius: 50px;
  position: absolute;
  padding: 10px;
  right: 0;
  height: 100%;
}

input {
  width: 100%;
  border-radius: 50px;
  padding: 10px;
}

input:focus {
  outline: none;
  box-shadow: none;
  border: 0;
}

@media (max-width: 567px) {
  #form {
    flex-direction: column;
  }
  button, input {
     position: static;
     width: 100%;
     border-radius: 0;
  }
}
<form id="form">
    <input type="text" name="name" placeholder="text">
    <button type="submit">BUILD YOUR APP</button>
</form>

user_33153330
Related