Trouble positioning social media icons

I am having trouble positioning social media icons for a site.

Here is what I have so far:

Right now, contact information is pushed up and social media icons are below the footer… I am not sure how to fix this.

The ideal page should look like this at the bottom: https://websitebuildersamerica.com/

Can someone please help me with this? Thank you!

Hey @mkobayashi0801!

It looks like you might have solved the issue. One thing that I did notice was the text over the image was a little hard to read.

So if you look at the website builders america page they use a linear gradient over the image so the text is easier to read.

  background:linear-gradient(rgba(0, 0, 0, 0.612), rgba(0, 0, 0, 0.612)),  url("https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");

Hope that helps!

Your page looks great!

Happy coding!

1 Like

Hi @jwilkins.oboe,

Sorry for the late reply. Yes, I was able to solve the issue. Thank you for your advice! I will do that.

I’ve got another issue… would you be able to help me with this also?

So I’ve built a website. Now I am trying to make it responsive on different devices. I am currently working to make it responsive for mobile devices, yet the header and footer just don’t fit on my mobile screen and it all looked messed up on my phone. Here are the pictures:

Do you have any idea on how to fix this?

HTML:

<div id="page-wrapper">

  <header class="top-header">
    <span class="span-header">
    
    
    <nav id="nav-bar">
      <ul>
        <li><a class="nav-link" href="#">KENUGS MOVERS</a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/dyXmMyo/nqMwvWVyKjPk">ABOUT US</a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/eYzMJWV/YvAgOeVvPGjA">SERVICES</a></li>
        <li><a class="nav-link" href="https://cdpn.io/turchan/debug/KKMoVGy/ZoMBazXYjRqk">CONTACT</a></li>
        
      </ul>
    </nav>
  </header>
  
  
  
  <div class="hero-image">
   <div class="hero-text">
     <h1 id="landing-title">
       
       <span class="span-1">HASSLE FREE</span> <span class="span-2">HOME RELOCATION</span></h1>
  
   </div>
  </div>
  

<div>
  <h2 class="landing">
    We are a Team of Dedicated Movers<br>Ensuring you an Affordable Hassle Free Home Relocation</h2>
  <p class="landing-desc">One-stop-shop for all your moving / hauling or relocation needs.<br>Your satisfaction guaranteed.</p>
</div>
  
  <div class="from-group">
    
      <button
              type="submit"
              id="submit"
              class="submit-button"><span style="font-family: 'Spectral SC', serif;">CALL / TEXT US NOW (832) 417-9305</span></button>
    </div>

  
<div class="hero-image-2">
   <div class="hero-text-2">
     <div class="container-address">
       
       
<div class="address">KENUGS MOVERS<br>
       
MINNEAPOLIS METRO AREA<br>

MONDAY TO SUNDAY FROM 7AM TO 11PM<br>

</div>
       
<div class="email-phone">

(832) 417-9305 Emmanuel<br>
       
(832) 417-9065 Joyce<br>
       

<div class="social-media">
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-twitter"></a>
</div>

</div>
  

   </div>
  </div>
</div>




<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">







  <div class="footer">© 2020  KENUGS MOVERS. ALL RIGHTS RESERVED.</div>
  
  

CSS


@import url('https://fonts.googleapis.com/css2?family=Spectral+SC&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 0.8px;
}

body {
  background-color: white;
  font-family: 'Spectral SC', serif;
  letter-spacing: 0.8px;
  }

.hero-image {
  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url("https://images.pexels.com/photos/5025628/pexels-photo-5025628.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260");
  background-color: white;
  height: 750px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 45px;
}

@media (max-width: 600px) {
  .hero-image {
    height: 450px;
  }
}

.hero-text {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 28px;
  padding-bottom: 100px;
  color: white;
}

#landing-title {
    font-weight: 400;
}

@media (max-width: 600px) {
    .span-1 {
      display: block;
      font-size: 30px;
    }
}

@media (max-width: 600px) {
    .span-2 {
      display: block;
      font-size: 30px;
    }
}

@media (max-width: 600px) {
    .hero-text {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  padding-top: 80px;
  }
}

.landing {
  color: black;
  text-align: center;
  font-size: 30px;
  line-height: 2;
  padding-top: 100px;
  font-weight: 400;
}

@media (max-width: 600px) {
  .landing {
    font-size: 16px;
    padding: 30px 10px 0;
    font-weight: 590;
  }
}

.landing-desc {
  color: black;
  text-align: center;
  font-size: 20px;
  padding: 50px 0 50px;
  line-height: 2.8;
}

@media (max-width: 600px) {
  .landing-desc {
    font-size: 14px;
    line-height: 1.8;
    padding: 20px 10px 30px;
    font-weight: 590;
  }
}

.submit-button {
  display: block;
  width: 26%;
  padding: 17px;
  background-color: white;
  border-radius: 5px;
  cursor: pointer;
  color: black;
  font-size: 18px;
  border: 3px solid black;
  margin: 0 auto 0 auto;
}

@media (max-width: 600px) {
  .submit-button {
    font-size: 14px;
    width: 60%;
    font-weight: 590;
    border: 2px solid black;
    line-height: 1.8;
  }
}

.submit-button:hover {
  color: white;
  background-color: black;
}




li {
  list-style: none;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  color: gray;
  text-decoration: none;
}



.top-header {
  z-index: 1;
  width: 100%;
  position: fixed;
  top: 0;
  min-height: 50px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: black;
  flex-direction: column;
}

@media (max-width: 600px) {
  .top-header {
    flex-wrap: wrap;
  }
}


nav {
  font-weight: 400;
}

@media (max-width: 600px) {
  nav {
    margin: 10px 0 10px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    padding: 0 50px;
  }
  nav li {
    padding-bottom: 5px;
  }
}

nav > ul {
  width: 40vw;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

@media (max-width: 650px) {
  nav > ul {
    flex-direction: row;
  }
}






.hero-image-2 {
  background-color: black;
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  }

@media (max-width: 600px) {
  .hero-image-2 {
    font-size: 16px;
    width: 72%;
  }
}


.hero-text-2 {
  text-align: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

@media (max-width: 600px) {
  .hero-text-2 {
    font-size: 16px;
    width: 72%;
  }
}

.container-address {
    min-height: 100px;
    width: 100%;
    display: grid;
    grid-template-columns: 400px 400px;
    grid-gap: 300px;
    justify-content: center;
    font-size: 17px;
    line-height: 2.5;
}


@media (max-width: 600px) {
  .container-address {
    font-size: 16px;
    width: 72%;
  }
}

.social-media {
  padding-top: 10px;
}

@media (max-width: 600px) {
  .social-media {
    font-size: 16px;
    width: 72%;
  }
}

.fa {
  padding: 19px;
  font-size: 30px;
  width: 60px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

@media (max-width: 600px) {
  .fa {
    font-size: 16px;
    width: 72%;
  }
}

.fa:hover {
  opacity: 1;
}

.fa-linkedin {
  background: #3B5998;
  color: white;
}

.fa-instagram {
  background: #f40083;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}


  

.footer {
  width: 100%;
  bottom: 0;
  padding: 10px;
  background-color: black;
  color: white;
  text-align: center;
}


@media (max-width: 600px) {
  .footer {
    font-size: 16px;
    width: 72%;
  }
}




Hey @mkobayashi0801!

Since this is a new topic for another project I would suggest opening up another topic thread. It gets really messy if there are multiple projects being discussed in the same thread.

It would also help if you could transfer your code to codepen so the FCC campers can take a look at your code in there, mess around with it and provide you with a good answer.

1 Like