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>
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>
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>
Oh my apologies! Forgot to remove the irrelevant id. It seems to be working when screen size is smaller but not recognizing the flex-end when on safari browser. Also when stacked where would I add padding so there’s a little space between the form and button when stacked?
Sorry, justify content: end. The button is showing up on the left side in safari. Looking great on other browsers
I’ve tried using various webkit methods but no dice. This should be recognized on Safari. Thoughts?
