Image is not getting responsive (Bootsrap)

Question

Image is not getting responsive (Bootsrap)

Asked 5 years, 3 months ago

Viewed 18 times

0

Gentlemen(a) I have a problem when I leave the page in this resolution (as shown below 1024px)...

I wish I knew where I was wrong :/

$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 900, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
  
  $(window).scroll(function() {
    $(".slideanim").each(function(){
      var pos = $(this).offset().top;

      var winTop = $(window).scrollTop();
        if (pos < winTop + 600) {
          $(this).addClass("slide");
        }
    });
  });
})

 body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color:darkturquoise;
  }
  h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;
  }
  h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
  }  
  .jumbotron {
    background-color: #33ccff;
    color: #fff;
    padding: 100px 25px;
    font-family: Montserrat, sans-serif;
  }
  .container-fluid {
    padding: 60px 50px;
      color: black;
  }
  .bg-grey {
    background-color: #f6f6f6;
  }
  .logo-small {
    color: RED;
    font-size: 50px;
  }
  .logo {
    color: #f4511e;
    font-size: 200px;
  }
  .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
  }
  .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }
  .carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #1176BC;
  }
  .carousel-indicators li {
    border-color: #1176BC;
  }
  .carousel-indicators li.active {
    background-color: blue;
  }
  .item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
  }
  .item span {
    font-style: normal;
  }
  .panel {
    border: 1px solid #33ccff; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
  }
  .panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
  }
  .panel-footer .btn:hover {
    border: 1px solid #1176BC;
    background-color: #fff !important;
    color: #1176BC;
  }
  .panel-heading {
    color: #fff !important;
    background-color: #33ccff !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  .panel-footer {
    background-color:important;
  }
  .panel-footer h3 {
    font-size: 32px;
  }
  .panel-footer h4 {
    color: #aaa;
    font-size: 14px;
  }
  .panel-footer .btn {
    margin: 15px 0;
    background-color: green;
    color: #fff;
  }
  .navbar {
    margin-bottom: 0;
    background-color: #009BCE;
    z-index: 9999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
  }
  .navbar li a, .navbar .navbar-brand {
    color: #fff !important;
  }
  .navbar-nav li a:hover, .navbar-nav li.active a {
    color: black !important;
    background-color: #fff !important;
  }
  .navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
  }
  footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
  }
  .slideanim {visibility:hidden;}
  .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
  }
  @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }
  @-webkit-keyframes slide {
    0% {
      opacity: 0;
      -webkit-transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      -webkit-transform: translateY(0%);
    }
  }
  @media screen and (max-width: 768px) {
    .col-sm-4 {
      text-align: center;
      margin: 25px 0;
    }
    .btn-lg {
      width: 100%;
      margin-bottom: 35px;
    }
  }
  @media screen and (max-width: 480px) {
    .logo {
      font-size: 150px;
    }
  }

<title>Destista 24 Horas</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!--- zoom desativado para o usuario -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="apple-touch-icon" sizes="180x180" href="img/icone/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icone/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="194x194" href="img/icone/favicon-194x194.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icone/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icone/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<nav class="navbar navbar-default navbar-fixed-top ">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#myPage">Inicio</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">Sobre</a></li>
        <li><a href="#services">Convênios</a></li>
        <li><a href="#portfolio">Veja se se</a></li>
        <li><a href="#pricing">Planos (partiular)</a></li>
        <li><a href="#contact">Contato</a></li>
        <li><a href="#map">Localização</a></li>  
      </ul>
    </div>
  </div>
</nav>
<div class="row fluid">
<div class="jumbotron text-center">
  <h1>clinica sei la..</h1> 
  <p>bla bla bla bla anos no ramo !</p> 
</div>
</div>

<!-- Container (About Section) -->
<div id="about" class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <h2>Sobre a Clinica</h2><br>
      <h4>Trabalhamos todos os dias em atendimentos clínicos e urgências de pronto socorro.</h4><br>
      <p> Há 66 anos atendendo na área odontológica é focada na excelência em implantes, ortodontia, próteses e reabilitação oral.</p>
     
    </div>
   
  </div>
</div>

<div class="container-fluid bg-grey">
  <div class="row">
    <div class="col-sm-4">
      <span class="glyphicon glyphicon-globe logo slideanim"></span>
    </div>
    <div class="col-sm-8">
      <h2>Our Values</h2><br>
      <h4><strong>MISSÃO:</strong> Nossa missão é fazer isso aquilo ajuda o mundo com isso aquilo fazer com que todos possam sla o que um dia poder ver o sla o que em cada sorriso na sociedade.</h4>
      <p><strong>VISÃO:</strong>Nossa missão nada mais nada menos do que ver o tal disso e sei que la aquilo etc e que um dia caso isso aquilo.</p>
    </div>
  </div>
</div>

<!-- Container (Services Section) -->
    <div class="container">
<div id="services" class="container-fluid text-center">
  <h2>Convênios</h2>
  <h4>Convênios que atendemos !</h4>
  <br>
  <div class="row slideanim">
      
    <div class="col-sm-3">
       <img src="img/covenio/unimed.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
    <div class="col-sm-3">
       <img src="img/covenio/amil.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
    <div class="col-sm-3">
       <img src="img/covenio/portoseguro.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
      <div class="col-sm-3">
       <img src="img/covenio/metlife.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
      
    </div>
      <div class="row slideanim">
       <div class="col-sm-3 col-md- col-lg-3">
       <img src="img/covenio/redeuna.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
        <div class="col-sm-3 col-md-1 col-lg-3">
       <img src="img/covenio/sulamerica.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
       <div class="col-sm-3 col-md-1 col-lg-3">
       <img src="img/covenio/cabesp.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
        <div class="col-sm-3 col-md-1 col-lg-3">
       <img src="img/covenio/inpao.png" alt="Smiley face" >
      <h4>ALGUMA COISA</h4>
      <p><!---descrição--->OUTRA COISA</p>
    </div>
  </div>
      </div>
  
  
</div>
    
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center bg-grey">
  <h2></h2><br>
  <h4>What we have created</h4>
  <div class="row text-center slideanim">
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="img/salvar.png" alt="Paris" width="400" height="300">
        <p><strong>Dr.Klaus</strong></p>
        <p>Descrição</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="newyork.jpg" alt="New York" width="400" height="300">
        <p><strong>New York</strong></p>
        <p>We built New York</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="thumbnail">
        <img src="sanfran.jpg" alt="San Francisco" width="400" height="300">
        <p><strong>San Francisco</strong></p>
        <p>Yes, San Fran is ours</p>
      </div>
    </div>
  </div><br>
  
  <h2>What our customers say</h2>
  <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <h4>"This company is the best. I am so happy with the result!"<br><span>Michael Roe, Vice President, Comment Box</span></h4>
      </div>
      <div class="item">
        <h4>"One word... WOW!!"<br><span>John Doe, Salesman, Rep Inc</span></h4>
      </div>
      <div class="item">
        <h4>"Could I... BE any more happy with this company?"<br><span>Chandler Bing, Actor, FriendsAlot</span></h4>
      </div>
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<!-- Container (Pricing Section) -->
<div id="pricing" class="container-fluid">
  <div class="text-center">
    <h2>Preços</h2>
    <h4>Aceitamos outras formas de pagamento </h4>
  </div>
  <div class="row slideanim">
    <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Basico</h1>
        </div>
        <div class="panel-body">
          <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div>     
    <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Médio</h1>
        </div>
        <div class="panel-body">
        <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div>       
    <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Avançado</h1>
        </div>
        <div class="panel-body">
          <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$X,XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div>  
        <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Avançado</h1>
        </div>
        <div class="panel-body">
          <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$X,XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div> 
        <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Avançado</h1>
        </div>
        <div class="panel-body">
          <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$X,XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div> 
        <div class="col-sm-4 col-xs-12">
      <div class="panel panel-default text-center">
        <div class="panel-heading">
          <h1>Avançado</h1>
        </div>
        <div class="panel-body">
          <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
           <p><strong>R$XX</strong> O QUE VAI SER FEITO</p>
        </div>
        <div class="panel-footer">
          <h3>R$X,XXX,XX</h3>
          <h4>Por Mês</h4>
          <button class="btn btn-lg">Saiba mais</button>
        </div>
      </div>      
    </div> 
  </div>
</div>

<!-- Container (Contact Section) -->
<div id="contact" class="container-fluid bg-grey">
  <h2 class="text-center">CONTACT</h2>
  <div class="row">
    <div class="col-sm-5">
        <p><i class="fa fa-whatsapp" style="font-size:26px;color:green"></i><a href="https://api.whatsapp.com/send?1=pt_BR&phone=55xxxxxxxxxx" target="_blank">  (xx) xxxx xxxx</a></p>
      <p><span class="glyphicon glyphicon-map-marker"></span> Chicago, US</p>
      <p><span class="glyphicon glyphicon-phone"></span> +00 1515151515</p>
      <p><span class="glyphicon glyphicon-envelope"></span> [email protected]</p>
    </div>
    <div class="col-sm-7 slideanim">
      <div class="row">
        <div class="col-sm-6 form-group">
          <input class="form-control" id="name" name="name" placeholder="Name" type="text" required>
        </div>
        <div class="col-sm-6 form-group">
          <input class="form-control" id="email" name="email" placeholder="Email" type="email" required>
        </div>
      </div>
      <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="5"></textarea><br>
      <div class="row">
        <div class="col-sm-12 form-group">
          <button class="btn btn-default pull-right" type="submit">Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="map" class="container-fluid bg-grey">
<h2 class="text-center">Localização</h2>
  <div id="map-widget-I27" class="map-widget">
        <iframe class="disabled" width="100%" height="300px" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=-25.498289088610882,-47.851674869763144&amp;key=AIzaSyARNP6PBrYdKNmsYf09tU8jRnffQb-sFQg&amp;language=pt-br" allowfullscreen="">
        </iframe>
    </div>
    <div style="background-color: white; padding: 15px 21px; border: 1px solid rgb(171, 171, 171); font-family: Roboto, Arial, sans-serif; color: rgb(34, 34, 34); box-sizing: border-box; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; z-index: 10000002; display: none; width: 300px; height: 180px; position: absolute; left: 10px; top: 60px;">
        <div style="padding: 0px 0px 10px; font-size: 16px;">Dados do mapa</div>
        <div style="font-size: 13px;">Dados cartográficos ©2019 Google</div><button draggable="false" title="Fechar" aria-label="Fechar" type="button" class="gm-ui-hover-effect" style="background: none; display: block; border: 0px; margin: 0px; padding: 0px; position: absolute; cursor: pointer; user-select: none; top: 0px; right: 0px; width: 37px; height: 37px;">
            <img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23000000%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%3C%2Fsvg%3E%0A" style="pointer-events: none; display: block; width: 13px; height: 13px; margin: 12px;"></button>
    </div>
    
    </div>

        
      
       <p>© Clinica blablá</p>
    <i class="fa fa-facebook-official" title="Facebook Brown" onclick="window.open('https://pt-br.facebook.com')" style="font-size:26px;color:black"></i>
          
 
        

        <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>

In your tags <img> add the class class="img-fluid" Bootstrap and take the test.

– Leo

2019/07/25 at 12:09
did not give @Leofaleiros

– caiquesey

2019/07/25 at 12:16
Law the answer marked as duplicate, but basically put width: 100% in your images

– hugocsl

2019/07/25 at 12:32

No answers

Browser other questions tagged html css

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