Having issue with the social media icons on my portfolio page

Hey guys, please help me out, am working on my portfolio page, everything on page seem to be working perfectly fine, except for the social media icons that’s at the contacts section, it’s not working out; the icons keep clustering together, why I want it to be space out. below are my codes:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
        crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <title>Personal Portolio</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <aside>
        <nav class="nav-bar">

            <img src="img/cassy2.jpg" alt="">
            <a href="#home"><i class="material-icons md-36">home</i>
                <p>Home</p>
            </a>

            <a href="#about"><i class="material-icons md-36">person</i>
                <p>About</p>
            </a>
            <a href="#portfolio"><i class="material-icons md-36">image</i>
                <p>portfolio</p>
            </a>
            <a href="#contact"><i class="material-icons md-36">mail</i>
                <p>contact</p>
            </a>
        </nav>
    </aside>
    <nav class="mobile-nav">
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#contact">Contact</a>
    </nav>
    <div class="introduction" id="welcome-section">
        <header class="home" id="home">
            <h1>I'm Obok Casmir</h1>
            <h4>Web Developer, WordPress Designer, Front-End Developer and Watson Chatbot Designer</h4>
            <img src="img/cassy1.jpg" alt="">
        </header>
    </div>

     <!--This is the main content of portfolio page--> 
    
    <main class="main-content">
    <section>
        <div class="about" id="about">
            <h2>About Me</h2>
            <p><span>Hello, I'm Obok Casmir(Cassyblaise) </span> I'm web developer, wordpress designer and Watson
                chatbots designer. life long life learner, and always ready for new opportunities. My hobbies are:
                Reading, love good music, watching football and I like going out for a long walk. </p>

            <p>I am very outgoing happy person and show this in my work. I can relate to the person in both my talking
                and writing style. I have a style that is very direct and honest. Most people consider it easy to
                understand what I'm saying even those who aren't native English speakers.
            </p>
            <p>I believe in users centered design and delivering the best possible experiences to clients. I have
                experience with HTML, CSS3, Flexbox, CSS Grid, JavaScript, jQuery WordPress Design and also Watson
                Chatbot Designer. I can use these technologies to build you a dynamic and personalized website from
                scratch.
                I also have some experience in the following online programs: WordPress, Webpack, Zoho, Git, Github,
                Slack, and many others including proprietary versions. One of my best traits is that I can learn new
                systems relatively easy, so even if I've never used your particular system. I am a quick learner.
            </p>
            <h3>My Skills</h3>
            <p>Html5</p>
            <div class="container">
                <div class="skills html">95%</div>
            </div>

            <p>CSS3</p>
            <div class="container">
                <div class="skills css">80%</div>
            </div>

            <p>Bootstrap</p>
            <div class="container">
                <div class="skills bootstrap">75%</div>
            </div>

            <p>JavaScript</p>
            <div class="container">
                <div class="skills JS">65%</div>
            </div>

            <p>Watson Chatbot</p>
            <div class="container">
                <div class="skills watson-chatson">70%</div>
            </div>

        </div>
    </section>

    <section class="portfolio" id="projects">
        <h2>portfolio</h2>
    
        <div class="row-halves">
        
            <div class="col" id="project-title">
                <a href="https://codepen.io/cassyblaise/pen/aBjoZN" target="_blank" class="project-title">
                <img src="img/productpage.png" alt="">
                <h3>Business</h3>
                <p>
                    Building Responsive and thoughtful websites for small and large businesses.
                </p>
            </a>
            </div>
        

            
            <div class="col" id="project-title">
                <a href="https://codepen.io/cassyblaise/pen/xaRJvq" target="_blank" class="project-title">
                <img src="img/surveyform.png" alt="">
                <h3>Mobile</h3>
                <p>
                    Fully Responsive, mobile ready design and implementation for all clients.
                </p>
              </a>
            </div>
        
        </div>

        <div class="row-halves">
            
            <div class="col" id="project-title">
                <a href="https://codepen.io/cassyblaise/pen/JmZOOb" target="_blank" class="project-title">
                <img src="img/docpage.png" alt="projects">
                <h3>UX/UI Designs</h3>
                <p>
                    Thoughtful and intuitive users experinces. all of my designs will be guaranteed to my clients.
                </p>
            </a>
            </div>
        

            <div class="col" id="project-title">
                <a href="https://codepen.io/cassyblaise/pen/YjOorx" target="_blank" class="project-title">
                <img src="img/tribute.png" alt="projects">
                <h3>Personal</h3>
                <p>
                    I also build and design for personal projects. no idea is too small. everyone deserve a voice on
                    the web.
                </p>
            </a>
            </div>
        </div>
    </section>

    <section class="contact" id="contact">
        <h2>Contact</h2>
        <div class="header">
            <h1>Let's work together...</h1>
            <p>How do you take your coffee?</p>
        </div>

        <div class="social-media">
            <span class="fa-stack fa-lg">
                <a href="https://twitter.com/cassyjnr" target="_blank" class="contact-details">      
  <i class=" fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i></a>
            </span>

            <span class="fa-stack fa-lg">
                <a href="https://facebook.com/cassy.blaise.9" target="_blank" class="contact-details">      
  <i class="
                    fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-facebook fa-stack-1x fa-inverse"></i></a>
            </span>

            <span class="fa-stack fa-lg">
                <a href="https://linkedin.com/in/obokcasmir/" target="_blank" class="contact-details">      
  <i class="
                    fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-linkedin fa-stack-1x fa-inverse"></i></a>
            </span>

            <span class="fa-stack fa-lg">
                <a href="https://github.com/cassyblaise" target="_blank" class="contact-details">      
  <i class="
                    fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-github fa-stack-1x fa-inverse"></i></a>
            </span>

            

            <span class="fa-stack fa-lg">
                <a href="https://codepen.io/cassyblaise" target="_blank" class="contact-details">      
  <i class="
                    fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-codepen fa-stack-1x fa-inverse"></i></a>
            </span>

            <span class="fa-stack fa-lg">
                <a href="https://medium.com/@cassyblaise" target="_blank" class="contact-details">      
  <i class="
                    fas fa-circle fa-stack-2x"></i>
                    <i class="fab fa-medium fa-stack-1x fa-inverse"></i></a>
            </span>
            <a href="mailto:codecassy@gmail.com" target="_blank" class="contact-details"><i class="material-icons md-48">mail</i>

            </a>
        </div>

    </section>

    <footer>


        <section class="bottom-bar">
        <p>&copy 2018 | All rights reserved</p>
</section>
    </footer>
    </main>
</body>

</html> 

*,
*::before,
*::after{
  box-sizing: border-box;
}
*:focus{
  outline: none;
}

body{
  padding: 0;
  margin: 0;
  background: #000;
  color: white;
  font-family: 'oxygen', sans-serif;

}

a{
  text-decoration: none;
}

img{
  width: 100%;
}

.home img{
   width: 100%;
  -webkit-filter: grayscale(100%) contrast(100%);
  filter: grayscale(100%) contrast(200%) brightness(60%);
}

.portfolio img{
  filter: grayscale(100%);
}

aside{
  position: fixed;
  background: #222;
  top: 0px;
  left: 0px;
  width: 120px;
  height: 100%;
  overflow: none;
  z-index: 1;
  text-align: center;
  padding: 0;
}

aside img{
  filter: grayscale(100%) contrast(50%) brightness(100%);
  margin-bottom: -3px;
}

.material-icons .md-36{
  font-size: 36px;
}


aside a{
  display: block;
  padding: 15px 0;
  color: white;
  font-size: 0.75em;
  letter-spacing: 2px;
  transition: all 0.35s;
  text-transform: uppercase;
}

aside p {
  margin: 0;
  padding: 0;
}

aside a:hover{
  background: #000;
}

aside nav a:nth-child(2){
  background: #000;
}

aside nav a:nth-child(2):hover{
  background: #b2b2b2;
  color: #222;
}
#welcome-section{
  max-width: 980px;
  background: #000;
  margin-left: 20%;
  padding: 12px 50px 12px 50px;
}

header{
  text-align: center;
  letter-spacing: 2px;
}

header h1{
  font-weight: bold;
  font-size: 4em;
  letter-spacing: 4px;
}

header h4{
  font-weight: 300;
  font-size: 1em;
  letter-spacing: 4px;
  color: #b2b2b2;
}

.main-content {
  position: absolute;
  margin-left: 140px;
  padding: 20px;
  margin-bottom: 100px;
}

.about,
.portfolio,
.contact{
  line-height: 1.5em;
  font-weight: 300;
  letter-spacing: 1px;
}

.about h2,
.portfolio h2,
.contact h2{
  text-transform: uppercase;
  font-weight: 300;
  padding-bottom: 10px;
  margin: 100px 0 0 0;
  letter-spacing: 4px;
}

.about p{
   color: #b2b2b2;
}

.about span{
   font-weight: 600;
   color: white;
}

.about h3{
  font-weight: 300;
  margin: 50px 0;
}

.container{
  width: 100%;
  background-color: #b2b2b2;
}

.skills{
  text-align: right;
  padding-right: 20px;
  line-height: 30px;
  color: white;
  background-color: #424242;
}

.html{
  width: 95%;
}

.css{
  width: 80%;
}

.bootstrap{
  width: 75%;
}

.JS{
  width: 65%;
}

.watson-chatson{
  width: 70%;
}

.portfolio h3{
  color: white;
  font-weight: 300;
  letter-spacing: 2px;
}

.portfolio p{
  font-size: 0.879em;
}

.row-halves{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    -webkit-flex-pack: justify;
}

.row-halves .col{
  width: 49%;
}

.col{
  border: 1px solid #222;
  background: #222;
  color: #b2b2b2;
  padding: 10px;
}
/*
.contact{
  margin-top: 20px;
  margin-bottom: 100px;
  background: transparent;
  padding: 20px  0;
}
*/

.social-media {
  background: #C8F7C5;
  width: 100%;
  top: 50%;
  text-align: center;
  transform: translateY(-5%);
  padding-bottom: 160px;
}

   .social-media .contact-details {
  display: inline-block;
  width: 150px;
  height: 150px;
  font-weight: bold;
  border-radius: 50%;
  border: 2px dashed white;
  text-decoration: none;
  vertical-align: middle;
  background-clip: content-box;
  margin-right: 15px;
  margin-left: 15px;
  padding: 10px;
  font-size: 70px;
  transition: .5s;
  color: #D7D0BE;
  
}

  .contact-details span {
   display: block;
   text-align: center;
  
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.social-media .contact-details:hover {
  padding: 20px;
  color: white;
  margin-left: -5px;
  transform: translateX(10px) rotate(360deg);
}

/*
.social-media .contact-details{
  background-color: #222;
  color: #b2b2b2;
}
*/

footer {
  border-top: 1px solid #222;
}
/*
.top-bar{
  padding: 20px 0;
  text-align: center;
}

.top-bar a{
  margin: 10px;
  font-size: 2em;
  color: #b2b2b2;
  transition: all 0.35s;
  display: inline-block;
}

.top-bar a:hover {
   transform: scale(1.1);
   color: #009688;
}
*/

.bottom-bar{
  background: #000;
  font-size: 0.75em;
  text-align: center;
  
}

/* @media Query */

@media(max-width: 789px){
  .row-halves{
    display: block;
  }
  .row-halves .col{
    width: 100%;
    margin: 0 0 10px 0; 
  }
}

@media(max-width: 600px) {
  .aside {
    display: block;
  }

  section{
    width: 100%;
    margin: 0 auto;
    padding: 12px 25px;
  }

header{
  margin-top: 80px;
  
}

header h1{
  font-size: 3em;
  line-height: 1.3em;
}

header h4 {
  font-size: 1em;
  letter-spacing: 2px;
}

.mobile-nav {
   position: fixed;
   width: 100%;
   display: flex;
   justify-content: space-around;
   background: rgb(0, 0, 0, 0.8);
   z-index: 1;
}

.mobile-nav a{
   width: 100%;
   color: #b2b2b2;
   text-transform: uppercase;
   font-size: 0.875em;
   letter-spacing: 2px;
   text-align: center;
   padding: 10px 10px;
   transition: all 0.35s;
}

.mobile-nav a:hover{
  background: #b2b2b2;
  color: #222;
}
}

@media(min-width:600px){
     .mobile-nav{
       display: none;
     }
}

So, with a little detective work, your problem is in the imported .fa-stack CSS block. That is positioning the spans themselves to a distance of 2.5em, which is WAY too close, given that you’re using the 2x logos. Instead, override that rule in your own CSS (by increasing the specificity of your rule), and make that something like 9em for a better positioning. Of course, on mobile, that will have to be totally different…

So your own custom rule might be:

.social-media span.fa-stack {
  /* Your overriding styles here.
   *   I would look at both width AND height
   */

}

For the record, the detective work was opening your page with no custom styles (so just the defaults from MaterialUI and FA), then creating a <style> el and adding in your styles, then opening the Chrome developer tools and inspecting those social media elements. All the spans are properly aligned, but that showed me what the problem was.

And the fun bit, the Chrome Developer Tools (and I think most developer tools) are pretty interactive. I actually changed the width of that .fa-stack class right in the inspector to find an appropriate value.

I really do suggest, over and over, that designers and developers get familiar with using dev tools.

1 Like

Thanks for the response, its work perfectly and thank you also for referring me to dev. tools, I’d some trick with it, am going to use the dev. tool regular so that I can get familiar with it. thanks a lot I do appreciate it.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

1 Like