CODEWITHSUNDEEP
htmlcss
not4n4
not4n4

Reputation: 51

Social Icons are broken

I have a card, with social icons on it,
and one is under the other.
i've tried inline-block, inline,
etc all of that stuff. It still won't fix, though.
Inline-flex works, but then it breaks the card. Please help. I'm sorry if the code is messy. Here is my code. If you need more code or whatever, here is the Website it is on.
Thank you.

.nyrisoc {
    position:relative;
    letter-spacing: 20px;
    top:270px;
    left:96px;
    margin:0px;
   
  }
  .cardtitle {
    position: relative;
    left: 55px;
    top: 12px;
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    margin-right: 0 0 0;
    width: 245px;
  }
  
  .center2 {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .cardtitle:hover {
    text-decoration: underline solid Currentcolor;
    cursor: pointer;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cardlink {
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    cursor:pointer;
  }
  .carddis {
    position: relative;
    top: -68px;
    right: 60px;
    color: gray;
    font-size: 17px;
  }
  .stuffyes {
    position: relative;
    bottom:194px;
  }
  .cardinfo {
    position: relative;
    bottom: 70px;
    left: 70px;
  }
  .allcrds {
    display:inline-table;
    position:relative;
    bottom:-30px;
    right:160px;
  }
  .card {
    width:269px;
    background-color: rgb(44, 44, 44);
    height:330px;
    border-radius:30px;
    font-family:roboto;
    filter: drop-shadow(0 0 0.75rem black);
    position:relative;
    left:20px;
    bottom:90px;
    margin: 27px;
  }
  .cname {
    color:white;
    filter: drop-shadow(0 0 0.75rem black);
    opacity:100%;
    font-family:roboto;
    text-align:center;
    position:relative;
    top:180px;
  }
  .fab {
    color:white;
    cursor:pointer;
    transition: color 1s ease;
  }
  .fab:hover {
    color:gray;
  }
  #cardlink:hover {
    text-decoration: underline solid currentColor;
  }
  .socials {
    position:relative;
    text-align:center;
    top:230px;
    display:inline-flex;
    letter-spacing: 20px;
    left:72px;
    top:270px;
  }
  .desctx {
    color:rgb(196, 192, 192);
    filter: drop-shadow(0 0 0.75rem black);
    text-align:center;
    font-family:roboto;
    position:relative;
    top:305px;
  }
  .pfpy {
    filter: drop-shadow(0 0 0.75rem black);
    width:100px;
    height:100px;
    position:relative;
    border-radius:50px;
  }
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Credits | Discord Noir</title>
        <link rel="stylesheet" type="text/css" href="src/css/main.css">
        <link rel="stylesheet" type="text/css" href="src/css/cred.css">
        <script src="https://kit.fontawesome.com/3bc98b09b4.js" crossorigin="anonymous"></script>
        </head>
        <body>

    <div class="allcrds">
        <!-- Nyria Card -->
        <div class="card" onContextMenu="return false;">
            <div class="nyrisoc" onContextMenu="return false;">
              <div class="discord" onContextMenu="return false;">
                <i class="fab fa-2x fa-discord" onContextMenu="return false;" onclick='window.open("https://discord.com/users/265924886461939712/");return false;'></i>
              </div>
              <div class="github" onContextMenu="return false;">
                <i class="fab fa-2x fa-github" onContextMenu="return false;" onclick='window.open("https://www.github.com/NYRI4");return false;'></i>
              </div>
              
            </div>
            <div class="stuffyes">
            <h2 class="desctx" onContextMenu="return false;"><br /><span onclick='window.open("https://github.com/NYRI4/Discolored");return false;' id="cardlink">Discolored</span></h2>
        <h1 class="cname" onContextMenu="return false;">Nyria</h1>
        <img class="pfpy center2"
          src="https://avatars.githubusercontent.com/u/65369563?v=4"
          draggable="false"
          alt=" Spyglass Logo"
          onContextMenu="return false;"
          />
        </div>
          </div>
        </div>



         <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

        <script href="src/js/main.js">
        </script>
    </body>
</html>

Upvotes: 1

Views: 76

Answers (2)

Sensoray
Sensoray

Reputation: 2420

I don't have access to your background, so it won't look quite right, but this should be good enough to send y'all in the right direction.

Items that are positioned relatively don't need to be manually set using top,bottom,left or right. Also the heirarchy of your elements should follow what you want to be seen on the screen. So if the image is at the top of the card, the element containing the image should be at the top of the card, not the bottom. I fixed some other stuff that should help it be a bit more responsive and user-friendly, a bit too much to list, but if you have any questions, let me know and I'm happy to help / answer.

.nyrisoc {
    position:relative;
    letter-spacing: 20px;
    /* top:270px; */
    /* left:96px; */
    margin:0px;
  }
  .cardtitle {
    position: relative;
    left: 55px;
    top: 12px;
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    margin-right: 0 0 0;
    width: 245px;
  }
  
  .center2 {
    position: absolute;
    /* top: 70px; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
  }
  .cardtitle:hover {
    text-decoration: underline solid Currentcolor;
    cursor: pointer;
  }
  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #cardlink {
    text-decoration: underline solid transparent;
    transition: text-decoration 1s ease;
    cursor:pointer;
  }
  .carddis {
    position: relative;
    top: -68px;
    right: 60px;
    color: gray;
    font-size: 17px;
  }
  .stuffyes {
    position: relative;
    /* bottom:194px; */
  }
  .cardinfo {
    position: relative;
    bottom: 70px;
    left: 70px;
  }
  .allcrds {
    /* display:inline-table; */
    position:relative;
    /* bottom:-30px; */
    /* right:160px; */
  }
  .card {
    width:269px;
    background-color: rgb(44, 44, 44);
    height:330px;
    border-radius:30px;
    font-family:roboto;
    filter: drop-shadow(0 0 0.75rem black);
    position:relative;
    /* left:20px; */
    /* bottom:90px; */
    /* margin: 27px; */
    display: inline-block;
    margin: 0px 15px 30px;
    padding: 15px 0 30px;
    vertical-align: top;
  }
  .cname {
    color:white;
    filter: drop-shadow(0 0 0.75rem black);
    opacity:100%;
    font-family:roboto;
    text-align:center;
    position:relative;
    /* top:180px; */
  }
  .fab {
    color:white;
    cursor:pointer;
    transition: color 1s ease;
  }
  .fab:hover {
    color:gray;
  }
  #cardlink:hover {
    text-decoration: underline solid currentColor;
  }
  .socials {
    position:relative;
    text-align:center;
    /* top:230px; */
    display: block;
    /* letter-spacing: 20px; */
    /* left:72px; */
    /* top:270px; */
  }
  .desctx {
    color:rgb(196, 192, 192);
    filter: drop-shadow(0 0 0.75rem black);
    text-align:center;
    font-family:roboto;
    position:relative;
    /* top:305px; */
    height: 70px;
  }
  .pfpy {
    filter: drop-shadow(0 0 0.75rem black);
    width:100px;
    height:100px;
    position:relative;
    border-radius:50px;
    margin: 30px auto 0;
    display: block;
  }
  .socials div{
  display:inline-block;
  margin:0 5px;
  }
<head><script src="https://kit.fontawesome.com/3bc98b09b4.js" crossorigin="anonymous"></script></head>
<body>
        <div class="navbar2">

            <div class="navbarbg">
            </div>
                <ul class="nvbritms">
                    <li class="hm" onclick="location.href = '/index.html';">Home</li>
                    <li class="credss" onclick="location.href = '/credits.html';">Credits</li>
                    <li class="discordinv" onclick="window.open(&quot;https://www.discord.gg/knHgcbw9vs&quot;);return false;">Discord</li>

                    
                </ul>
                
         </div>         
         <img class="logo22" src="/src/img/DNLogoW.png" onclick="location.href = '/index.html';">
         

         <!-- Cards -->
         <div class="allcrds">
         <!-- Snapperito Card -->
         <div class="card" oncontextmenu="return false;">
            <div class="stuffyes">
            <img class="pfpy center2" src="https://avatars.githubusercontent.com/u/52221287?v=4" draggable="false" alt=" Spyglass Logo" oncontextmenu="return false;"><h2 class="desctx" oncontextmenu="return false;"><span onclick="window.open(&quot;https://github.com/Snippets-For-Discord/theme-warnings&quot;);return false;" id="cardlink">Theme Warnings</span><br><span onclick="window.open(&quot;https://github.com/snappercord/Settings-Icons&quot;);return false;" id="cardlink">Settings Icons</span></h2>
        <h1 class="cname" oncontextmenu="return false;">Snapperito</h1>
        
        </div><div class="socials" oncontextmenu="return false;">
              <div class="discord" oncontextmenu="return false;" style="
    display: inline-block;
    margin: 0 5px;
">
                <i class="fab fa-2x fa-discord" oncontextmenu="return false;" onclick="window.open(&quot;https://discord.com/users/431883840483491850/&quot;);return false;" aria-hidden="true"></i>
              </div>
              <div class="github" oncontextmenu="return false;" style="
    display: inline-block;
    margin: 0 5px;
">
                <i class="fab fa-2x fa-github" oncontextmenu="return false;" onclick="window.open(&quot;https://www.github.com/snapperito&quot;);return false;" aria-hidden="true"></i>
              </div>
              <div class="instagram" oncontextmenu="return false;" onclick="window.open(&quot;https://www.instagram.com/snapperito/&quot;);return false;" style="
    display: inline-block;
    margin: 0 5px;
">
                <i class="fab fa-2x fa-instagram" oncontextmenu="return false;" aria-hidden="true"></i>
              </div>
              
            </div>
            
          </div><div class="card" oncontextmenu="return false;">
            <div class="stuffyes">
            <img class="pfpy center2" src="https://avatars.githubusercontent.com/u/65369563?v=4" draggable="false" alt=" Spyglass Logo" oncontextmenu="return false;"><h2 class="desctx" oncontextmenu="return false;"><span onclick="window.open(&quot;https://github.com/NYRI4/Discolored&quot;);return false;" id="cardlink">Discolored</span></h2>
        <h1 class="cname" oncontextmenu="return false;">Nyria</h1>
        
        </div><div class="socials" oncontextmenu="return false;">
              <div class="discord" oncontextmenu="return false;" style="
    display: inline-block;
    margin: 0 5px;
">
                <i class="fab fa-2x fa-discord" oncontextmenu="return false;" onclick="window.open(&quot;https://discord.com/users/265924886461939712/&quot;);return false;" aria-hidden="true"></i>
              </div>
              <div class="github" oncontextmenu="return false;" style="
    display: inline-block;
    margin: 0 5px;
">
                <i class="fab fa-2x fa-github" oncontextmenu="return false;" onclick="window.open(&quot;https://www.github.com/NYRI4&quot;);return false;" aria-hidden="true"></i>
              </div>
              
            </div>
            
          </div>
        </div>
    
    <div class="allcrds">
        <!-- Nyria Card -->
        
        </div>



         <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

        <script href="src/js/main.js">
        </script>
    
</body>

Upvotes: 0

George-Paul B.
George-Paul B.

Reputation: 584

try this

.nyrisoc > * {
  width: 20px;
  display: inline-block;
  height: 65px;
}

Upvotes: 1

Related Questions