Jump to content
DinhoPHP

Corousel Bootstrap pequeno em altura no celular

Recommended Posts

Olá!

Tenho um carousel em Bootstrap que se ajusta automaticamente à página, porém no modo mobile fica muito pequeno. O carousel está direto no <body>. Segue o código.

 

O resultado pode ser visualizado em: http://equipenovainfo.com.br/_portifolio/br_informatica_tec/

 

<!-- CAROUSEL -->

    <div id="carousel_slide" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
        
            <li class="active bg-primary" data-target="#carousel_slide" data-slide-to="0"></li>
            <li class="bg-primary" data-target="#carousel_slide" data-slide-to="1"></li>
            <li class="bg-primary" data-slide-to="#carousel_slide" data-target-to="2"></li>

        </ol>
    
        <div class="carousel-inner">
        
            <div class="carousel-item active">
            
                <img class="img-fluid" src="_imagens/_slide/foto01.jpg" alt="">

                <div class="carousel-caption text-dark d-none d-md-block">
                
                    <h2>Título da Descrição I</h2>
                    <p class="lead">A descrição deste anúncio do banner aparece aqui!</p>

                </div>
            </div>

            <div class="carousel-item">
            
                <img class="img-fluid" src="_imagens/_slide/foto02.jpg" alt="">

                <div class="carousel-caption text-dark d-none d-md-block">
                
                    <h2>Título da Descrição II</h2>
                    <p class="lead">A descrição deste anúncio do banner aparece aqui!</p>

                </div>

            </div>

            <div class="carousel-item">
            
                <img class="img-fluid" src="_imagens/_slide/foto03.jpg" alt="">

                <div class="carousel-caption text-dark d-none d-md-block">
                
                    <h2>Título da Descrição III</h2>
                    <p class="lead">A descrição deste anúncio do banner aparece aqui!</p>

                </div>

            </div>

        </div>       

        <a class="carousel-control-prev" href="#carousel_slide" role="button" data-slide="prev">
            
                <span class="carousel-control-prev-icon"></span>
                <span class="sr-only">Anterior</span>
            </a>

            <a class="carousel-control-next" role="button" data-slide="next" href="#carousel_slide">
            
                <span class="carousel-control-next-icon"></span>
                <span class="sr-only">Avançar</span>
            </a>

    </div> 

 

Share this post


Link to post
Share on other sites

Suponho que isso lhe ajude!

 

CSS

 

@media screen and (max-width: 765px) {
	.carousel-inner .carousel-item img {
		min-height: 250px
	}
}

 

Share this post


Link to post
Share on other sites

Uma outra opção é utilizar duas imagens para cada item do slide e com as classes helpers de ocultar e mostrar do bootstrap mostrar apenas uma para cada tamanho. Se preferir, usa o atributo srcset para usar apenas uma tag img, possivelmente essa opção seja melhor apenas para suporte a navegadores mais modernos por falta de suporte do atributo em versões antigas.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By astolpho
      eu gostaria de saber como posso "desativar" ou "ativar" uma class a partir do php, clicando o botão. 
       
       
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="vieport" content="width=device-widht, initial-scale=1.0">
          <meta http-equiv="X-UA-Comapatible" content="ie=edge">
          <title>Barra de Progesso Oficial</title>
          <style type="text/css">
              
              .container{
                  width: 100%;
              }
              .step-pog-bar{
                  margin-top: 20%;
                  counter-reset: step;
              }
              .step-pog-bar li{
                  list-style: none;
                  float: left;
                  width: 20%;
                  position: relative;
                  text-align: center;
              }
              .step-pog-bar li::before{
                  content: counter(step);
                  counter-increment: step;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border: 2px solid #ddd;
                  display: block;
                  text-align: center;
                  margin: 0 auto 10px auto;
                  border-radius: 50%;
                  background-color: #fff;
              }
              .step-pog-bar li::after{
                  content: '';
                  position: absolute;
                  top: 15px;
                  left: -50%;
                  border: 2px solid #ddd;
                  width: 100%;
                  z-index: -1;
              }
              
              .step-pog-bar li:first-child::after{
                  content: none;
              }
              .step-pog-bar li.active{
                  color: chartreuse;
              }
              .step-pog-bar li.active::before{
                  border-color: chartreuse;
              }
              .step-pog-bar li.active + li::after{
                  border-color: chartreuse;
              }
              .btn{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 20%;
              }
              .btn_D{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 10%;
              }
       
          </style>
      </head>
      <body>
          <div class="btn">
              <input type="submit" value="ativar">
          </div>
          <div class="btn_D">
              <input type="submit" value="Desativar">
          </div>
          <div class="container">
              <ul class="step-pog-bar">
                  <li class="active">Canal Dentario</li>
                  <li class="active">Limpeza</li>
                  <li class="active">Clareamento</li>
                  <li class="active">Escovação</li>
                  <li>Conclusão</li>
              </ul>
          </div>
      </body>
      </html>
    • By devfelipemonteiro
      tegcommerce - plataforma de e-commerce open source
      https://tegcommerce.org
      https://github.com/tegcommerce
      https://t.me/tegcommerce
       
      objetivo
      do brasil para o mundo a maior plataforma de e-commerce open source
       
      skills necessários
      qualquer contribuição é bem vinda
       
      acesse nosso grupo do telegram: https://t.me/tegcommerce
       
      projetos similares
      wordpress e woocommerce
      drupal
      joomla
      magento

    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By vmdev
      Bom dia!
      Eu tô com um probleminha aqui, espero que alguém consiga me ajudar.
      Eu tenho dois elementos: h1 e h2, eu fiz um script para efeito de digitação pra ambos, só que eu quero que o efeito de digitação do h2 seja iniciado somente quando o h1 for terminado, ou, depois de um tempo que eu selecionar. Tentei fazer dessa forma, mas não deu certo:
      <script>                                 function typeWrite (elemento) {                                 const textoArray = elemento.innerHTML.split('');                                 elemento.innerHTML = '';                                 textoArray.forEach((letra, i) => {                                  setTimeout(function() {                                      elemento.innerHTML += letra                                  }, 75 * i)                                                                  });                                                      }                          const titulo = document.querySelector('h1')                          typeWrite(titulo);                          </script>                          <script>                             var segundos = 4;                             setTimeout ( function typeWrite (elemento) {                             const textoArray = elemento.innerHTML.split('');                             elemento.innerHTML = '';                             textoArray.forEach((letra, i) => {                              setTimeout(function() {                                  elemento.innerHTML += letra                              }, 75 * i)                                                          });                                              }, segundos * 1000);                      const titulo2 = document.querySelector('h2')                      typeWrite(titulo2);                      </script>  
       
       Alguém pode ma falar qual é o erro? Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.