How To Make Social Icons Responsive HTML CSS-CodePudding

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  id="home">
        <div >
            <div >
                <div >Hello, Myself</div>
                <div >Piyush Shrivastava</div>
                <div >And I'm a <span ></span></div>
                <a href="#">Download CV</a>
            </div>
        </div>
        <div >
            <ul>
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  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;
    }
}```

CodePudding user response：

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 >
  <div >
    <div >
      <div >Hello, Myself</div>
      <div >Piyush Shrivastava</div>
      <div >And I'm a <span ></span></div>
      <a href="#">Download CV</a>
    </div>
  </div>
  <ul >
    <li>
      <div >
        <i  aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div >
        <i  aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div >
        <i  aria-hidden="true"></i>
      </div>
    </li>
    <li>
      <div >
        <i  aria-hidden="true"></i>
      </div>
    </li>
  </ul>
</section>

CodePudding user response：

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  id="home">
        <div >
            <div >
                <div >Hello, Myself</div>
                <div >Piyush Shrivastava</div>
                <div >And I'm a <span ></span></div>
                <a href="#">Download CV</a>
            </div>
        </div>
        <div >
            <ul > // give class icons to make it a flexbox 
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  aria-hidden="true"></i>
                    </div>
                </li>
                <li>
                    <div >
                        <i  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;
    
    }