Question posted in 
I’m very happy with my bootstrap contact form, however when I minimize it down to cellular level it disappears and I have to scroll all the way to the right. Can anyone help me with my CSS to size it down perfectly?
Also, is there any way to make the toggle buttons center when they visible rather than floating to the left.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Contact</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="contact.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="home.html"><img class="avatar" src="images/Originals/avatar.jpg" alt>Munoz Designs</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-toggle="collapse"data-target="#navbarResponsive"aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<!--Navbar links-->
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link"
href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="gallery.html">Gallery</a>
</li>
<!--Social Media Icons-->
<li class="nav-item">
<a class="nav-link" href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush" aria-hidden="true"></i></a>
<li class="nav-item">
<a class="nav-link" title="Email">
<i class="fa fa-envelope-o" aria-hidden="true"></i></a>
</ul>
</div>
</div>
</nav>
<div class="intro">
<h1>Contact</h1>
<h4>If you would like to work with me, send me a message!</h4>
</div>
<!--Contact-->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-horizontal" method="post">
<fieldset>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="fname" name="name" placeholder="Name" type="text" class="form-control">
<label for="fname" class="fa fa-user input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<input id="email" name="email" type="text" placeholder="Email" class="form-control">
<label for="email" class="fa fa-envelope-o input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-8">
<div class="input-wrapper">
<textarea class="form-control" id="message" name="message" placeholder="Message" rows="3"></textarea>
<label for="message" class="fa fa-pencil input-icon bigicon"></label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-center">
<button type="submit" class="btn btn-outline-secondary btn-md">Submit</button>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
html{
box-sizing: border-box;}
*,
*: before,
*: after {
box-sizing: inherit;
padding: 0;
margin: 0;
}
body{background-image: url();
width: 100%;
height: 100%;
background-position: bottom center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
font-family:"Quicksand";
font-size: 1.2em;
line-height: 1.375em;
padding: 0;
margin: 0;
background-color: #2F3A3B;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
navbar-brand{
height: 3em;
width: 3em;
margin-top: -8px;
border-radius: 5.0em;
margin-right: 1em;
margin-left: -5em;
margin-bottom: -8px
}
.avatar{
border-radius: 5em;
margin-right: .5em;
margin-left: 1em;
}
.intro{
display: inline-block;
width: 100%;
padding: 65px 0 65px;
background-color: #2A2332;
background-size: cover;
font-size: 1.9em;
text-align: center;
color: #FFF;
}
h1{
font-weight: medium;
text-shadow:5px 5px 10px black;
}
h4{
font-size: -.5em;
}
.row{
margin-right: 4em;
margin-left: 4em;
margin-top: .10em;
padding-bottom: -.30em;
}
.container {
margin-left: 17em;
padding-top: 1.5em;
}
.bigicon {
font-size: 35px;
color: #808080;
}
.input-icon {
position: absolute;
left: .5rem;
top: .7rem;
/* Keep icon in center of input, regardless of the input height */
}
#message {
vertical-align: middle;
}
input {
padding-right:30px;
}
.form-control {
text-indent: 2rem;
width: 75%;
}
.input-wrapper {
position: relative;
}
.btn{
margin-right: 10em;
}
@media screen and (min-width: 640px){
}
@media screen and (min-width: 960px){
}
main {flex: 1;}
2
Answers
I found the answers:
For the contact form to be responsive I deleted the .row in CSS. Once I did that, it was working as a responsive form.
For the toggle buttons to be center, I simply added "text-center" to the collapse property. See below.
Perhaps instead of using separate
litags you can use the bootstrap row and column parameters. Try something like this: