CODEWITHSUNDEEP
htmlcssblogger
Diseños Web
Diseños Web

Reputation: 17

Social media DIV issue

I'm making my own Blogger Theme but I have a little problem with the social media bar. Here you have a direct link to my blog. As you can see, the bar is not shown correctly. Here you have the CSS Code 

/* Buttons */

#social {
  width: 100%;
  height:auto;
  padding-top:30px;
  padding-bottom:30px;
  background-color:#D8D8D8;
}


#soc {
  margin-left:10%;
  margin-right:10%;
}

And here you have the HTML Code

  <div id='social'> 

<center>

<div id='soc'> 


    <div class='facebook'><a href='http://www.facebook.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Facebook-icon.png'/></a></div>
    <div class='twitter'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Twitter-icon.png'/></a></div>
    <div class='youtube'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Youtube-icon.png'/></a></div>
    <div class='google'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Google-plus-icon.png'/></a></div>
    <div class='blogger'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Blogger-icon.png'/></a></div>
    <div class='instagram'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Instagram-icon.png'/></a></div>
    <div class='reddit'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Reddit-icon.png'/></a></div>
    <div class='linkedin'><a href='http://www.twitter.com'><img src='http://icons.iconarchive.com/icons/designbolts/flat-social-media/96/Linkedin-icon.png'/></a></div>

    </div> 

    </center>

</div>

I tried adding the css height:auto; to #social but it didn't work.

Upvotes: 0

Views: 450

Answers (4)

Kumar Satyam
Kumar Satyam

Reputation: 1

<div id="social">
    <a href="" target="_blank"><i class="fab fa-linkedin"></i></a>
    <a href="" target="_blank"><i class="fab fa-behance-square"></i></a>
    <a href="" target="_blank"><i class="fab fa-twitter-square"></i></a>
  </div>

Upvotes: 0

Evan Sorrell
Evan Sorrell

Reputation: 3

Have you tried using min-height: 30px; forcing the height to be a minimum of 30 PX? In my experience to you have to have display:block; for this to work properly

 #social { 
 display:block;
 width: 100%; 
 min-height:30px; 
 padding-top:30px; 
 padding-bottom:30px; 
 background-color:#D8D8D8;
   }

If the diversity is not responsive like the rest of the page you may have to add more to your css such as 

 #social { 
 display:block;
 float:left;
 margin:auto;
 width: 100%; 
 min-height:30px; 
 padding-top:30px; 
 padding-bottom:30px; 
 background-color:#D8D8D8;
   }

I'm not at my computer to test this however

Upvotes: 0

Misunderstood
Misunderstood

Reputation: 5665

Both your social and soc have issues. Both have a rendered height of 0px.

The social icons are Okay, the problem is you just say you have "a little problem". It is not clear what it is you would like to improve. It appears to me your bigger problem is with the "underpoststxt" class. But I do not know how you want it to behave as the width of the Browser changes. When the Browser window width gets down to 700px is when it goes to hell in FireFox.

On mobile, there are no social icons. You say zoom is a problem. I associate zoom with mobile. On the desktop the icon are very responsive. At a window width of 1263px they are all in one line. At 1262 the Link In drops down next to the text in "underpoststxt".

What do you want it to do? Your social icons are larger than they need to be IMHO.

Upvotes: 0

SharpCode
SharpCode

Reputation: 1455

Add the following to #social 

display: table;
margin: 0 auto;

Since you wish to have them stay within the grey area of #social you need to make it resize accordingly. This is why using min-height or anything else to set a fixed height will not work.

Upvotes: 0

Related Questions