CODEWITHSUNDEEP
htmlcss
Alexandra
Alexandra

Reputation: 641

Social Media Icons Responsive

I can't seem to make my social media icons be responsive when in cellular mode. it stays to the very corner of the right. I would like it to be centered /horizontally right under the bio section. I'm finding it a bit difficult because I'm not using bootstrap for this feature, just basic ul list. If anyone can help, i would appreciate it.

enter image description here

<!DOCTYPE html>
<html>
<head>
  <title>About</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="about1.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 text-center" 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" href="index.php" title="Email">
                          <i class="fa fa-envelope-o" aria-hidden="true"></i></a>
                        </ul>
                      </div>
                    </div>
                  </nav>

                  <div class="intro">
                    <h1>About</h1>
                  </div>






                  <main>
                    <div class="row">
                      <div class="col"><p> <h5> Eddie Munoz is an Austin, Texas based character artist currently working with QC Games, a video game development company. He previously worked at Carbine Studios in Aliso Viejo, California helping create various creatures, armors, mounts, and weapons for WildStar; a free-to-play online game. Be sure to follow him on instagram for his latest projects. <h5><br></div>

                      <!-- <img src="images/hammer.gif" alt="" width="200" height="275"><-->

                    </div>
                  </main>

                  <footer class="page-footer">
                    <ul>
                      <li>
                        <a href="https://www.instagram.com/eddiearkmunoz/" title="Follow on Instagram" target="_blank"><i class="fa fa-instagram fa-lg" aria-hidden="true" style="color:white"></i></a>

                        <li>
                          <a href="https://www.linkedin.com/in/eddie-munoz-351a9428/" title="Follow on Linkedin" target="_blank"><i class="fa fa-linkedin-square fa-lg" aria-hidden="true" style="color:white"></i></a>

                          <li>
                            <a href="https://twitter.com/arkadiusart" title="Follow on Twitter" target="_blank"><i class="fa fa-twitter fa-lg" aria-hidden="true" style="color:white"></i></a>

                            <li>
                              <a href="https://eddiemunoz.deviantart.com/gallery/" title="Follow on Deviant Art" target="_blank"><i class="fa fa-deviantart fa-lg" aria-hidden="true" style="color:white"></i></a>

                              <li>
                                <a href="https://www.artstation.com/ed209" title="Follow on ArtStation" target="_blank"><i class="fa fa-paint-brush fa-lg" aria-hidden="true" style="color:white"></i></a>

                                <li>
                                  <a href="index.php" title="Email">
                                    <i class="fa fa-envelope-o fa-lg" aria-hidden="true" style="color:white"></i></a>
                                  </ul>



                                </li>
                              </footer>






                              <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;
  -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;
    position: center;
  }
  h5{
    color: #FFF;

     margin: 10px 75px 10px;
     padding-left: 2px;
     padding-right: 2px;
     font-size: .9em;

  }

  .row{
    display: flex;
    flex-flow: column wrap;
    margin-left: .6em;
    margin-right: .6em;

  }
  .col{
    flex: 1;
    margin: .5em;
    padding: 15px 75px 15px;
    color: #FFF;

    font-size: .9em;
  }

.page-footer{
  display:flex;
  margin: 10px 475px 10px;
  list-style-type: none;


}

.page-footer ul{
  align-items:center;

}

.page-footer ul li{
  display:inline-block;
  margin-right: 20px;
  margin-left: 20px;


 }

   @media screen and (min-width: 640px){
    .row{flex-flow: row wrap;}

    main .col:nth-child(2){flex: 1;}
  }

  @media screen and (min-width: 960px){

    main .col:nth-child(2){flex: .40;}
  }

  main {flex: 1;}

Upvotes: 1

Views: 3446

Answers (1)

khalil et
khalil et

Reputation: 45

try this (i gave the ul a class to avoid affecting other uls in the page) :

ul.social-icons {
    display: block;
    margin: 0 auto;
    text-align: center
}

ul.social-icons li {
    display: inline-block;
}

Upvotes: 1

Related Questions