I am a beginner in Bootstrap and am using the framework for a school work.
Previously, I was using the class .container to leave the content "together", but as I did not like the space around I decided to use .container-fluid . So far so good. But what is happening now is that the document is resizing more than the "normal Bootstrap" (< 767, 767 > = 991, 991 > = 1199, > 1200) and the @media of the CSS is running out of the measure I'm asking.
Here are the codes:
$(document).ready(function() {
$(window).on('load resize', function() {
$('#width').html('Documento: ' + $(document).width() + '<br/>\
Container: ' + $('.container-fluid').width());
});
});@media (min-width: 624px) and (max-width: 1006px) {
#dp-qtd {
display: none;
}
}
@media (min-width: 1185px) and (max-width: 1920px) {
#dp-qtd {
display: none;
}
}
#dashboard-perfil {
/* div lateral do perfil */
border-radius: 4px;
box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}
#dashboard-perfil p {
margin: 0;
padding: 0;
}
#dp-dados {
/* div com as informações do perfil */
padding: 10px;
text-align: center;
background: #fff;
color: black;
}
#dp-foto {
/* img - foto da dashboard */
width: 103px;
margin-top: -70px;
margin-bottom: 5px;
padding: 3px;
background: #fff;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
#dp-nome {
/* p - nome do usuário */
font-size: 14pt;
}
#dm-menu {
/* ul com as opções de menu */
padding: 5px 5px;
list-style: none;
background: white;
}
#dm-menu li {
width: 100%;
padding: 7px;
border-bottom: 1px solid silver;
}
#dm-menu li:first-child {
border-top: 1px solid silver;
}
#dm-menu li:last-child {
border-bottom: none;
}<html lang="pt-br">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0; background: #DCDFE0;">
<div id="width"></div>
<div class="row-fluid">
<div class="col-lg-2 col-md-3 col-sm-4" id="dashboard">
<div id="dashboard-perfil">
<div style="background: url('http://pbs.twimg.com/media/CncnrswWgAAHvWn.jpg') no-repeat; background-size: cover; background-position: top; height: 160px;"
id="dp-capa"></div>
<div id="dp-dados">
<a href="profile.php?username=<?= $username ?>">
<img src="https://dyn.web.whatsapp.com/pp?t=l&u=5527996496870-1465520388%40g.us&i=1470673504&ref=0%40kEU%2BKEqxd4R7bNFuR%2FWAYDezQNqLMbdnNDOGd3o0UHlkONE9PZCeKtaK&tok=0%40iW8Ka0H%2FSw3Gc3wy5ZmTB7E0UrHgMrt%2FkbGsbVVmqp5Qes1ZIyaFxW6CmY%2FyECwAPZdc2Pe39PFlOQ%3D%3D"alt="Foto de perfil de <?= $dados['nome']?>" id="dp-foto">
</a>
<p id="dp-nome">
BS
</p>
<ul id="dp-qtd">
<li>
teste
</li>
<li>
teste
</li>
<li>
teste
</li>
</ul>
</div>
</div>
</div>
<div class="col-lg-7 col-md-6 col-sm-5" id="feed" style="background-color: navy">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae mi accumsan, pulvinar lorem ut, laoreet arcu. Ut iaculis ipsum nec neque pharetra, hendrerit lacinia sem sollicitudin. Pellentesque vulputate sem eu ipsum semper tempus. Duis velit
nisi, pharetra ut dictum ut, molestie et nisl. Mauris rhoncus, ipsum ac condimentum mattis, turpis risus eleifend libero, et ultrices magna neque non nibh. In hac habitasse platea dictumst. Donec hendrerit neque eu nulla tincidunt, sed ullamcorper
magna placerat. Nulla quis augue nibh. Vivamus suscipit elementum porttitor. Mauris auctor porta ipsum at tincidunt. Maecenas vitae faucibus nibh. Cras semper, ex et faucibus sollicitudin, dolor sapien fringilla urna, sit amet auctor turpis
quam non justo. Praesent blandit leo diam, at faucibus nunc pellentesque eu. Vivamus a sapien dignissim, posuere mi sed, rutrum libero. Nulla gravida, neque eu ullamcorper egestas, est massa eleifend quam, suscipit interdum leo magna vitae arcu.</p>
<p>Proin maximus interdum arcu vitae congue. Quisque scelerisque, enim id bibendum finibus, orci justo tincidunt metus, porta luctus turpis augue vulputate turpis. Cras in dui eu eros ultricies semper. Aliquam ut finibus tellus, et laoreet diam.
Sed purus lacus, elementum id libero eget, tempus dictum nisl. In euismod fringilla consectetur. In hac habitasse platea dictumst. Pellentesque est felis, fringilla in neque a, maximus ultricies ante. Vestibulum euismod interdum imperdiet. Phasellus
rutrum quam ut lacus lobortis feugiat. Aliquam erat volutpat. Curabitur molestie libero nec consequat fermentum. Nulla quis dui lacus. Vivamus vitae nisi cursus, ultrices orci et, dignissim ante. Vivamus non velit tellus.</p>
</div>
<div class="col-lg-3 col-md-3 col-sm-3" style="background-color: #b90000">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae mi accumsan, pulvinar lorem ut, laoreet arcu. Ut iaculis ipsum nec neque pharetra, hendrerit lacinia sem sollicitudin. Pellentesque vulputate sem eu ipsum semper tempus. Duis velit
nisi, pharetra ut dictum ut, molestie et nisl. Mauris rhoncus, ipsum ac condimentum mattis, turpis risus eleifend libero, et ultrices magna neque non nibh. In hac habitasse platea dictumst. Donec hendrerit neque eu nulla tincidunt, sed ullamcorper
magna placerat. Nulla quis augue nibh. Vivamus suscipit elementum porttitor. Mauris auctor porta ipsum at tincidunt. Maecenas vitae faucibus nibh. Cras semper, ex et faucibus sollicitudin, dolor sapien fringilla urna, sit amet auctor turpis
quam non justo. Praesent blandit leo diam, at faucibus nunc pellentesque eu. Vivamus a sapien dignissim, posuere mi sed, rutrum libero. Nulla gravida, neque eu ullamcorper egestas, est massa eleifend quam, suscipit interdum leo magna vitae arcu.</p>
<p>Proin maximus interdum arcu vitae congue. Quisque scelerisque, enim id bibendum finibus, orci justo tincidunt metus, porta luctus turpis augue vulputate turpis. Cras in dui eu eros ultricies semper. Aliquam ut finibus tellus, et laoreet diam.
Sed purus lacus, elementum id libero eget, tempus dictum nisl. In euismod fringilla consectetur. In hac habitasse platea dictumst. Pellentesque est felis, fringilla in neque a, maximus ultricies ante. Vestibulum euismod interdum imperdiet. Phasellus
rutrum quam ut lacus lobortis feugiat. Aliquam erat volutpat. Curabitur molestie libero nec consequat fermentum. Nulla quis dui lacus. Vivamus vitae nisi cursus, ultrices orci et, dignissim ante. Vivamus non velit tellus.</p>
</div>
</div>
</div>
</body>
<html> As you can see, in some situations @media works and in others it does not. If they are full screen, they will also see the problem of resizing. Here on my computer it does what I ask in @media with 15px difference (so, if I ask to do at 1510px, it does at 1495px.)
What am I doing wrong?
EDIT: I noticed that it is working properly while you are responsive. But when it goes from 767px, instead of the size of the document being 768px, it goes back 15px and gets 753px.