Problems with . container-Fluid and @media

Asked

Viewed 95 times

1

I’m a beginner in Bootstrap and I’m using the framework for a school project.

In the old days, I was using the class .container to leave the content "together", but as I did not like the space around I decided to use the .container-fluid. So far, so good. But what is happening now is that the document is resizing more than the "Bootstrap normal" (< 767, 767 >= 991, 991 >= 1199, > 1200) and the @media CSS is working out as I am asking.

Follow 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>
  <script src="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 the @media works and others do not. If you put it in full screen, you will also see the problem of resizing. Here on my computer it does what I ask on @media with 15px difference (then, if I ask to do it at 1510px, he does it at 1495px).

What am I doing wrong?

EDIT: I realize it’s working properly while you’re responsive. But when it goes from 767px, instead of the document size being 768px, it goes back 15px and gets 753px.

twitter-bootstrap bootstrap-3 responsive-layout front-end grid

  • Here it seems to be working right, you can explain better?

  • I think this 15px you’re talking about has to do with class col-... which by default come with 15px padding left/right

  • @Jorgeb., what is happening are two problems: 1. The class . container-Fluid is doing the resize several times, beyond what is already known, I assumed it was on account of the classes col-Sm, lg, and etc... but I’m not sure. 2. The media is working with wrong measurements, example in the code, is that Document is at 623px, but the property of taking the ul test from the 624px worked. Here in my code, is giving a differential of 15px for the measurements I defined in the media.

  • @Miguel, I tested without removing the 15px from the padding-left and right and even then, it didn’t work. What has changed is that now, the difference has gone from 15px to 45px (so added the pixels of the padding).

  • Ha yes, I see

  • @Matheussantos but if I’m not mistaken, that’s the behavior of content-Fluid`. When I have a little more time I test this...

  • By the way avoid greetings and thanks, see [Ask].

  • @Matheussantos here is always the same size up to 1920px

  • @Matheussantos sees http://i.stack.Imgur.com/Uknxz.png

  • @Jorgeb. Thank you so much for the help and for trying to solve, I analyzed more deeply and saw that the problem was in the function that picked the size, because it was giving problem with the scroll bar. Beginner’s messrs But thank you so much!

Show 5 more comments
No answers

Browser other questions tagged twitter-bootstrap bootstrap-3 responsive-layout front-end grid

You are not signed in. Login or sign up in order to post.