Hello, I'm having problem with <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> , as I have this code below:
<div style="max-width:30px; width:100%; z-index:99999999;" class="social_bar">
<style>
.social{
display:block;
width:30px;
height:30px;
<?php
$icones = $_POST['icones'];
$query = mysql_query("SELECT * FROM pagcabecalho");
$res = mysql_fetch_array($query);
?>
background-image: url(img/<?php echo $res['icones']; ?>.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; z-index:999999999;}
#instagram_dt{ background-position:-32px 0; z-index:999999999;}
#facebook_dt{ background-position:-64px 0; z-index:999999999;}
#twitter_dt{ background-position:-96px 0; z-index:999999999;}
#youtube_dt{ background-position:-128px 0; z-index:999999999;}
</style>
<?php
$endtwitter = $_POST['endtwitter'];
$endface = $_POST['endface'];
$endyoutube = $_POST['endyoutube'];
$endinstagram = $_POST['endinstagram'];
$query = mysql_query("SELECT * FROM pagcabecalho");
$res = mysql_fetch_array($query);
?>
<?php echo $res['linkcontato']; ?>
<?php echo $res['linkinstagram']; ?>
<?php echo $res['linktwitter']; ?>
<?php echo $res['linkface']; ?>
<?php echo $res['linkyoutube']; ?>
</div>
which directs you to the pages for each selected social network.
However, when <meta name="viewport" is enabled the icons do not become responsive, and when I remove it, they become responsive.
Can anyone give me a help or even a hint on how to make the icons be responsive to <meta name="viewport" .
Images with and without <meta name="viewport" in code.
With <meta name="viewport" :
Without<metaname="viewport" :
