0
Hi, I’m having trouble with the <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">, because 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>
that directs to the pages referring to each social network selected.
However, when the <meta name="viewport" this enabled the icons do not become responsive, already when I remove it they are responsive.
Can someone give me a help or even a hint on how to make the icons be responsive with the <meta name="viewport".
Images with and without the <meta name="viewport" in the code.
With the <meta name="viewport":
Without the <meta name="viewport":
Set a width for the background in css background-size:cover I think this will help you.
– Vítor André
Width, no. Sets the size.
– Vítor André
Thanks for the tip @Vítor André, but I inserted the
background-size:coverstyle but did not resolve. And I discovered that when I withdraw the<meta name="viewport", icons are responsive, but I lose the effect ofToggle navigation. I’m posting images with and without the<meta name="viewport"so you can see what happens, thanks?– Murilo Cabral
I will post the images in the question, OK? Hugs and from now on my thanks.
– Murilo Cabral
I believe that they are, in fact, not responsive without the view, because you do not use measure in % but fixed measure (in px) for both the bar and the icones. Put a measure in percentage and see how it looks. If not, you may have some css that is entering and undoing your desired effect @Murilo Cabral
– Vítor André