Center button and form

user_13791643 0
Viewed 42

I've been playing around with an input field and a submit button, but can't get them centered on mobile. Also, it'd be good if they have the same width, but somehow the input field is always wider. Any ideas?

Image of mobile view

input {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
}

button {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  margin-left: 10px;
  cursor: pointer;
}
 
  
@media screen and (max-width: 440px) {
    button {
  max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  }
  
  input {
          max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
  margin-bottom: 8px;
}
  
  
<form action="https://URL.co.uk" method="get" target="_blank"><input name="utm_source" type="hidden" value="[partner-handle]" /> <input name="utm_medium" type="hidden" value="affiliate" /><input name="utm_campaign" type="hidden" value="[partner-campaign]" /> <input style="color: #252e5d; font-size: 16px;font-weight: bold;" maxlength="8" name="vrm" type="text" value="" placeholder="Enter your Reg" /> <button style="color: #ffffff; font-size: 18px;">Compare prices</button></form>

button forms input css html
3 Answers

Use below CSS in media query:

@media (max-width:767px){
    button{
      display:table;
      margin:0 auto;
    }
}


input {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
}

button {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  margin-left: 10px;
  cursor: pointer;
}

@media screen and (max-width: 440px) {
  button {
    max-width: none;
    width: 80%;
    height: 50px;
    border-radius: 4px;
    border: 0px solid #1b55f5;
    background-color: #1b55f5;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
  }
  input {
    max-width: none;
    width: 80%;
    height: 50px;
    border-radius: 4px;
    border: 0px solid #252e5d;
    background-color: #ffffff;
    padding-left: 10px;
    margin-bottom: 8px;
  }
  @media (max-width:767px) {
    button, input{
      display: table;
      margin: 0 auto;
    }
  }
<form action="https://URL.co.uk" method="get" target="_blank"><input name="utm_source" type="hidden" value="[partner-handle]" /> <input name="utm_medium" type="hidden" value="affiliate" /><input name="utm_campaign" type="hidden" value="[partner-campaign]" /> <input style="color: #252e5d; font-size: 16px;font-weight: bold;"
    maxlength="8" name="vrm" type="text" value="" placeholder="Enter your Reg" /> <button style="color: #ffffff; font-size: 18px;">Compare prices</button></form>

user_62850540

For mobile, just add:

display: block;
margin: 0 auto;


<style>
input {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
}

button {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  margin-left: 10px;
  cursor: pointer;
}
 
  
@media screen and (max-width: 440px) {
    button {
  max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  margin: 0 auto;
  display: block;
  }
  
  input {
          max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
  margin: 0 auto 8px;
  display: block;
}
  
  </style>
<form action="https://URL.co.uk" method="get" target="_blank"><input name="utm_source" type="hidden" value="[partner-handle]" /> <input name="utm_medium" type="hidden" value="affiliate" /><input name="utm_campaign" type="hidden" value="[partner-campaign]" /> <input style="color: #252e5d; font-size: 16px;font-weight: bold;" maxlength="8" name="vrm" type="text" value="" placeholder="Enter your Reg" /> <button style="color: #ffffff; font-size: 18px;">Compare prices</button></form>

user_125532010

Hi this is happening because of the margin-left:10px on the button.

<style>
input {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
}

button {
  width: 192px;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  cursor: pointer;
}
 
  
@media screen and (max-width: 440px) {
    button {
  max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #1b55f5;
  background-color: #1b55f5;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 14px;
  }
  
  input {
          max-width: none;
  width: 80%;
  height: 50px;
  border-radius: 4px;
  border: 0px solid #252e5d;
  background-color: #ffffff;
  padding-left: 10px;
  margin-bottom: 8px;
}
  
  </style>
<form action="https://URL.co.uk" method="get" target="_blank"><input name="utm_source" type="hidden" value="[partner-handle]" /> <input name="utm_medium" type="hidden" value="affiliate" /><input name="utm_campaign" type="hidden" value="[partner-campaign]" /> <input style="color: #252e5d; font-size: 16px;font-weight: bold;" maxlength="8" name="vrm" type="text" value="" placeholder="Enter your Reg" /> <button style="color: #ffffff; font-size: 18px;">Compare prices</button></form>

user_139583250
Related