Search code examples
htmlcssposition

Adjusting Positioning of an Element

I am creating a contact page for a website. I am trying to move the little "social media buttons" up to be directly underneath the email box, and I can't figure it out. Any help would be appreciated, thanks!

Below is my CSS & HTML:

body { 
  font-family: 'Raleway', sans-serif;
  background:url("../images/example.jpg"); 
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  }

form { 
  max-width:420px; 
  margin:200px auto;
  }

.feedback-input {
  color:white;
  font-family: "Avenir", Arial, sans-serif;
/*  font-weight:500;*/
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #ffe6f0;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #ff3385; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  background:#ffe6f0;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:#555;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#ff3385; color:white;}

/*SOCIALS*/
.wrapper {
  padding: 20px;
  text-align: center;

}
.box {
  display: inline-block;
  top:10px;
  width: 50px;
  height: 50px;

  /*changes distance between apps*/
  margin: 0px 19px; 

  line-height: 50px;
  font-family: 'Avenir';
  font-size: 28px;
  text-align: center;
  color: #555;
  border-radius: 10px;
  background: #eee;
  overflow: hidden;
  cursor: pointer;
  transition: .30s;
}
.box:hover {
  transition: .30s;
  color: white; 
}
#facebook:hover {
  background-color: #3a5795;
}
#insta:hover {
  background-color: #c32594;
}
#vimeo:hover {
  background-color: #00adee;
}
#linkedin:hover {
  background-color: #007bb6;
}
#tumblr:hover {
  background-color: #314358;

}

/*NAV BAR*/
/*style of the button*/
.dropbtn{
    background-color: rgba(255,255,255,0);
    color: white;
/*    margin:0 auto;*/
    font-size: 16px;
    border: none;
    cursor: pointer;
    
}

/*the div that controls the position of menu content*/
.dropdown {
    position: fixed;
    left: 0;
    top: 0;
    display: inline-block;
 
}

/*dropdown content*/
.dropdown-content {
    /*font-family: ;*/
    display: none;
/*    right: 0;*/
    background-color: #f9f9f9;
    max-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/*links inside of dropdown*/
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/*change color of links on hover*/
.dropdown-content a:hover {background-color:#ffe6f0}



/*show menu on hover*/
.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:active .dropdown-content{
  background-color:red;
}

/*change the background color of dropdown button when content is shown*/
.dropdown:hover .dropbtn {
    background-color: #ff3385;
}
<!DOCTYPE html>
<html>
 <title>Example || Contact</title>
  <link rel="stylesheet" href="../css/contact.css">
<body>

<div class="dropdown">
  <button class="dropbtn"><font size="15"> &#x2630 </font></button>
  <div class="dropdown-content" style="left:0;">
    <a href="../index.html"  class="active">Home &#9756</a>
    <a href="../html/about.html"  class="active">About &#9786</a>
    <a href="../html/contact.html">Contact &#x260F</a>
    <a href="../html/portfolio.html">Portfolio &#9825</a>
  </div>
</div>

<form action="mailto:[email protected]" method="post" enctype="text/plain">    
  <input type="text" name="name"  class="feedback-input" placeholder="Name" />   
  <input type="text" name="email" class="feedback-input" placeholder="Email" />
  <textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
  <input type="submit" value="SUBMIT"/>
</form>

<div class="wrapper">
  <div class="box" id="facebook"><a href="https://www.facebook.com"><img src= "../images/fb.png"> </a></div>
  <div class="box" id="insta"><a href="https://www.instagram.com"> <img src= "../images/insta.png"> </a></div>
  <div class="box" id="vimeo"><a href="https://www.vimeo.com"> <img src= "../images/vimeo.png"></a></div>
  <div class="box" id="linkedin"><a href="https://www.linkedin.com"><img src= "../images/linkedin.png"></a></div>
  <div class="box" id="tumblr"><a href="http://www.tumblr.com"><img src= "../images/tumblr.png"></a></div>

</div>

<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
</body>
</html>

Solution

  • Change css rule of form, because for now it has large bottom margin (200px)

    It has to be:

    form { 
  max-width:420px; 
  margin: 200px auto 0 auto;
}