Different layout in anonymous window and other browsers

Asked

Viewed 43 times

0

I am developing a simple site with html,css, in case it is necessary I put the code later.

but the point would be I’m using grids with Row and col of bootstrap, when I open from normal Chrome the layout gets all squirrelly it seems like it’s not with the right css, now if I open in an anonymous window the same site or in Mozilla appears right as it should. I’m testing the site locally.

HTML

    <div class=" container content-wrapper pro">
            <div class=" row" >
                <div class="col-t">
                    <h4 class="card-title">Chave de fenda philips</h4>
                    <img src="img/p1.jpg" alt="Card image cap">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <h4 class="card-title">Chave de fenda philips</h4>
                    <img src="img/p1.jpg" alt="Card image cap">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                </div>
             <div class="col-t">
                    <h4 class="card-title">Chave de fenda philips</h4>
                    <img src="img/p1.jpg" alt="Card image cap">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <h4 class="card-title">Chave de fenda philips</h4>
                    <img src="img/p1.jpg" alt="Card image cap">
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>

                </div>          
             <div class="col-l">
                <h4 class="card-title">Chave de fenda philips lateral</h4>
                <img src="img/p1.jpg" alt="Card image cap">
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                 <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                   <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                     <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>

</div>
        <!-- /.content-wrapper -->
        <div class="rodape">
            <?php
                include("footer.php");
            ?>
        </div>
</div>

HEAD 

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- jvectormap -->
<link rel="stylesheet" href="plugins/jvectormap/jquery-jvectormap-1.2.2.css">

<link rel="stylesheet" href="bootstrap/css/style.css">

<script type="text/javascript" src="bootstrap/js/jquery-3.4.1.min.js"></script>

<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>

CSS

 .pro{
    padding-top:20%;
 }


 .col-t{
    text-align: center;
    margin-left: 2%;
    width: 28%;
    justify-content: center ;
   max-width: 100%;
   height: auto;
 }

.col-l{

text-align: center;
 margin-left: 3%;
  width: 36%;
 justify-content: center ;
  max-width: 100%;
 height: auto;
 }


    .wrapper{ 
        background-color: #ffffff;
        margin:2%;
        margin-left:5%;
        margin-right:5%;
        margin-bottom: 0;
        width: 90%;

    }
    .home{
    color :black;
    height: 100%;
    background-color: #D3D3D3;
    overflow:auto;
}

Normal chrome inserir a descrição da imagem aqui Chrome anonymous window inserir a descrição da imagem aqui Mozilla

inserir a descrição da imagem aqui

html css responsive-layout layout responsive

  • "if it is necessary I put the code later", yes, need, read how to elaborate a [mcve] inclusive. If you can post the prints of the respective screens will also help a lot.

  • done placed code and pictures

  • And the prints of the different screens?

  • placed sorry for not having put before

1 answer

1


I think that somehow Chrome in Anonymous window should manage the indexes differently... I say this, because I took your code here and used the initial template suggested in the indexing and it worked perfectly. Your <head> was assembled at odds with what the documentation suggests....

inserir a descrição da imagem aqui

You have to check exactly the order in which you are importing the Bootstrap dependencies (CSS/jQuery/Bootstrap.JS). Here in the documentation they speak as it should be home template https://getbootstrap.com.br/docs/4.1/getting-started/introduction/#template-home. Furthermore, I recommend that a Ctrl+F5 in the browser to force clear the cache.

Here’s your code working perfectly in Chrome.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="screen"
    href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  <style>
    .pro {
      padding-top: 20%;
    }


    .col-t {
      text-align: center;
      margin-left: 2%;
      width: 28%;
      justify-content: center;
      max-width: 100%;
      height: auto;
    }

    .col-l {

      text-align: center;
      margin-left: 3%;
      width: 36%;
      justify-content: center;
      max-width: 100%;
      height: auto;
    }


    .wrapper {
      background-color: #ffffff;
      margin: 2%;
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 0;
      width: 90%;

    }

    .home {
      color: black;
      height: 100%;
      background-color: #D3D3D3;
      overflow: auto;
    }
  </style>
</head>

<body>

  <div class=" container content-wrapper pro">
    <div class=" row">

      <div class="col-t">
        <h4 class="card-title">Chave de fenda philips</h4>
        <img src="https://placecage.com/100/100">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <h4 class="card-title">Chave de fenda philips</h4>
        <img src="https://placecage.com/100/100">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
      </div>
      <div class="col-t">
        <h4 class="card-title">Chave de fenda philips</h4>
        <img src="https://placecage.com/100/100">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <h4 class="card-title">Chave de fenda philips</h4>
        <img src="https://placecage.com/100/100">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
      </div>

      <div class="col-l">
        <h4 class="card-title">Chave de fenda philips lateral</h4>
        <img src="https://placecage.com/100/100">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
          content.</p>
      </div>

    </div>
  </div>


  <!-- /.content-wrapper -->
  <div class="rodape">
    <?php
        include("footer.php");
    ?>
  </div>


  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

  • 1

    Thank you so much, I’m quite beginner in the layout part =(.

  • @Gabriellaselbach without problems, always read the documentation helps a lot and should be a habit. If solved there am glad to have helped [] s

Browser other questions tagged html css responsive-layout layout responsive

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