0
I have this code below working in almost all functions.
The only thing missing to be 100%, is to make it responsive.
Or at least reduce the size of each icon according to the size of the devices.
I have tried in many ways, but without success.
If friends can give me a hint or even guide me what I should do to achieve my goal, I will be grateful.
Below the Code:
<div style="max-width:30px; width:100%;" class="social_bar">
<style>
.social{
display:block;
width:30px;
height:30px;
background-image: url(img/Preta.png);
float:left;
margin-left:4px;
overflow:hidden;
text-indent:-999px;
margin-bottom:4px;
}
.social_bar{
margin-top:-100px;
position:fixed;
right: 7px;
top: 50%;
width:40px;
z-index:9999;
float:left;
}
#contato_dt{ background-position: 0 0;}
#instagram_dt{ background-position:-32px 0;}
#facebook_dt{ background-position:-64px 0;}
#twitter_dt{ background-position:-96px 0;}
#youtube_dt{ background-position:-128px 0;}
</style>
<a href="#" id="contato_dt" class="social" title="Contato Via E-mail"></a>
<a target="_blank" href="#" id="instagram_dt" class="social" title="Acesso ao Instagram"></a>
<a target="_blank" href="#" id="facebook_dt" class="social" title="Acesso ao Facebook"></a>
<a target="_blank" href="#" id="twitter_dt" class="social" title="Acesso ao Twitter"></a>
<a target="_blank" href="#" id="youtube_dt" class="social" title="Acesso ao Youtube"></a>
</div>
I discovered that this goal
<meta name="viewport" content="width=device-width, initial-scale=1">, what use for responsive fonts that is preventing the responsive icons. Would anyone tell me why and what would be the solution? Hugs.– Murilo Cabral
Hello, I didn’t get the point. Responsive how so? Which rule do you want? I think what you want is more css or javascript/jquery and not php
– Tiago Gomes