I have encountered an issue with adjusting the size of a button using a CSS class. The form containing the button and content is placed within a <div> row class to ensure they are displayed side by side.
Here is a snippet of my code:
.row.someDiv{
margin-left: 0px;
margin-right: 0px;
max-width: initial;
}
input[type="text"]{
border: none;
border-bottom: 1px solid;
width: 250px;
margin-bottom: 10px;
background: transparent;
}
.button-size{
width: 100px;
padding-bottom: 20px;
}<div class="row someDiv">
<div class="col-xs-8">
<br/>
<label>
<input type="text" class="text-line" placeholder="Name" required></label><br/>
<label><input type="text" class="text-line" placeholder="Email Address" required></label><br/>
<label><input type="text" class="text-line" placeholder="phone number"></label><br/>
<label><input id="message-size" type="text" placeholder="Message"></label><br/>
<button type="submit" class="button-size space btn btn-block btn-primary"><i class="fa fa-paper-plane">Submit</i></button>
</div>
<div class="col-xs-4">
<p class="content-style"> Want to get in touch? please fill up the form and I'll revert back soon.
</div>
</div>