Ubuntu - How To Make Social Icons Responsive HTML CSS

PiyushShrivastava
July 23, 2022
167 views
0 votes
2 Answers

i am developing my portfolio website but i came into an error can anyone just help me.
i need to make my social icons responsive.
Here The The Image For Desktop Version.

I need To make it responsive and direction to row for mobile version. Please Help Me.
As You Can See Here The Social Icons Are Not Responsive.

index.html

```
    <!-- home -->
    <section class="home bd-grid" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello, Myself</div>
                <div class="text-2">Piyush Shrivastava</div>
                <div class="text-3">And I'm a <span class="typing"></span></div>
                <a href="#">Download CV</a>
            </div>
        </div>
        <div class="social">
            <ul>
                <li>
                    <div class="circle">
                        <i class="fa fa-facebook-f" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-youtube" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
    </section>```

Styles.css

.home{
    display: flex;
    flex-wrap: wrap;
    background: url("/img/banner.jpg") no-repeat center;
    height: 100vh;
    color: #fff;
    min-height: 500px;
    background-size: cover;
    background-attachment: fixed;
    font-family: 'Ubuntu', sans-serif;
}
.home .max-width{
  width: 100%;
  display: flex;
}
.home .max-width .row{
  margin-right: 0;
}
.home .home-content .text-1{
    font-size: 27px;
}
.home .home-content .text-2{
    font-size: 75px;
    font-weight: 600;
    margin-left: -3px;
}
.home .home-content .text-3{
    font-size: 40px;
    margin: 5px 0;
}
.home .home-content .text-3 span{
    color: #32de84;
    font-weight: 500;
}
.home .home-content a{
    display: inline-block;
    background: #32de84;
    color: #fff;
    font-size: 25px;
    padding: 12px 36px;
    margin-top: 20px;
    font-weight: 400;
    border-radius: 6px;
    border: 2px solid #32de84;
    transition: all 0.3s ease;
}
.home .home-content a:hover{
    color: #32de84;
    background: none;
}

.social{
    position: absolute;
    top: 35%;
    right: 5%;
    color: #fff;
    /* background-color: #ffffff; */
}

.social ul{
    list-style: none;
}

.social li{
    margin-bottom: 20px;
    text-align: center;
}

.circle{
    background-color: transparent;
    border: 2px solid white;
    border-radius: 200px;
    height: 35px;
    width: 35px;
}

.social i{
    padding-top: 7px;
    height: 30px;
    width: 30px;
    color: #ffffff;
}

@media (max-width: 947px) {
    .home .home-content .text-2 {
        font-size: 60px;
    }
}```

Answers

Try thinking of your problem the other way around.

Layout shifts like this are much easier to deal with when working with a ‘mobile first’ approach. (style the mobile version and then override at a min-width media query to style the desktop version, rather than styling the desktop perfectly and then trying to fold everything down to mobile.)

I’ve knocked up a quick demo of what should work for you.
This is NOT a direct replication of or fix of your existing code, just a demo of the methods you could use, but hopefully from this demo and the snippets, you should understand what is happening and be able to apply some of these methods to your own code.

The method is entirely done with flex properties.
The socials are no longer absolutely positioned and the unnecessary social wrapper div is removed.

I’ve added border colors and padding just to more obviously show you whats happening to the box model when you resize your browser.

To view the demo, click ‘run code snippet’ – but make sure to then also click the ‘full page’ option otherwise it’d only show you the mobile layout.

Here’s the JSFiddle where I created the demo incase it’s useful: CLICK TO VIEW FIDDLE

.contentWrapper {
  border: 1px solid pink;
  padding: 10px;
}

.mainContent {
  border: 1px solid blue;
  padding: 10px;
}

.social {
  border: 1px solid green;
  padding: 10px;
}


ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.circle {
  background-color: red;
  border: 2px solid white;
  border-radius: 200px;
  height: 35px;
  width: 35px;
}

@media screen and (min-width: 948px) {
  .myWrapper {
    display: flex;
    min-height: 100vh;
    flex-direction: row;
  }

  .contentWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
  }

  .mainContent {
    width: calc(100% - 55px);
    max-width: 1000px;
    margin: 0 auto;
  }

  .social {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .social ul {
    display: flex;
    flex: 0 0 55px;
    flex-direction: column;
  }
}

<section class="myWrapper">
  <div class="contentWrapper">
    <div class="mainContent">
      <div class="text-1">Hello, Myself</div>
      <div class="text-2">Piyush Shrivastava</div>
      <div class="text-3">And I'm a <span class="typing"></span></div>
      <a href="#">Download CV</a>
    </div>
  </div>
  <ul class="social">
    <li>
      <div class="circle">
        <i class="fa fa-facebook-f" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-instagram" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-twitter" aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div class="circle">
        <i class="fa fa-youtube" aria-hidden="true"></i>
      </div>
    </li>
  </ul>
</section>

To make icons in row
we can do it using @media in the approach

APPROACH

Use flexbox to make your icons in a row
and use grid to make everything in a row when you are on a big screen

you can also set width and then add margin auto to make things centre but using justify-content center is better —> not told in this answer

    <!-- home -->
    <section class="home bd-grid" id="home">
        <div class="max-width">
            <div class="home-content">
                <div class="text-1">Hello, Myself</div>
                <div class="text-2">Piyush Shrivastava</div>
                <div class="text-3">And I'm a <span class="typing"></span></div>
                <a href="#">Download CV</a>
            </div>
        </div>
        <div class="social">
            <ul class="icons"> // give class icons to make it a flexbox 
                <li>
                    <div class="circle">
                        <i class="fa fa-facebook-f" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-instagram" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div class="circle">
                        <i class="fa fa-youtube" aria-hidden="true"></i>
                    </div>
                </li>
            </ul>
        </div>
    </section>```

***css***


    .icons{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    @media screen and (min-width: 800px //your mobile screen width) {
      .icons {
        display: flex;
        justify-content:center;
      }
    .home{
    display:grid;
    width: 100vw;
    gap: 20px;
    text-align:center;
    grid-template-column:2fr 2fr;
    
    }

Please signup or login to give your own answer.

Click here to cancel reply.

Ubuntu – How To Make Social Icons Responsive HTML CSS

Answers