-1

Como poderia fazer com esse button se ajeita quando e para dispositivo mobile?

inserir a descrição da imagem aqui

Quando é para PC ele fica certo.

inserir a descrição da imagem aqui

Este é o codigo.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="../static/img/carusel_01.png" alt="Primeiro Slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../static/img/carusel_02.png" alt="Segundo Slide">
            <div class="container">
                <div class="carousel-caption text-right text-white">
                  <h1>B772 Overhead Panel Animation Graphic</h1>
                  <p>Here's part 2 of our B772 animation rendering</p>
                  <p><a class="btn btn-lg btn-primary" href="https://infiniteflight.com/timeline#b772-overhead-panel-animation-graphic" role="button">Saiba mais</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="../static/img/carusel_04.png" alt="Terceiro Slide">
            <div class="container">
                <div class="carousel-caption text-right text-white">
                  <h1>Programação ATC</h1>
                  <p>Programação ATC  16/03 a 22/03 de 2020</p>
                  <p><a class="btn btn-lg btn-primary" href="https://community.infiniteflight.com/t/atc-schedule-16-22-march-2020/408909    " role="button">Saiba mais</a></p>
                </div>
              </div>
        </div>       
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Próximo</span>
    </a>
</div>
2
  • Remover o botão na versão mobile é uma alternativa? 19/03/2020 às 16:34
  • tente criar uma classe para ele e usar um media queries ex.: @media(max-width: 480px) {//sua função aqui!} se for ajudar leia este artigo da w3school: w3schools.com/css/css_rwd_mediaqueries.asp
    – Teuuz1994
    19/03/2020 às 17:30

1 Resposta 1

-1

Troque a classe text-right por text-center e adicione outra classe text-sm-right. Isso fará com que o elemento alinhe o texto (inclusive o botão) ao centro quando a resolução (largura) for menor que 576px (-sm) e à direita quando for maior que esse valor.

Veja:

Execute em tela cheia e altere o tamanho da janela.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Primeiro Slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Segundo Slide">
            <div class="container">
                <div class="carousel-caption text-center text-white text-sm-right">
                  <h1>B772 Overhead Panel Animation Graphic</h1>
                  <p>Here's part 2 of our B772 animation rendering</p>
                  <p><a class="btn btn-lg btn-primary" href="https://infiniteflight.com/timeline#b772-overhead-panel-animation-graphic" role="button">Saiba mais</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" alt="Terceiro Slide">
            <div class="container">
                <div class="carousel-caption text-center text-white text-sm-right">
                  <h1>Programação ATC</h1>
                  <p>Programação ATC  16/03 a 22/03 de 2020</p>
                  <p><a class="btn btn-lg btn-primary" href="https://community.infiniteflight.com/t/atc-schedule-16-22-march-2020/408909    " role="button">Saiba mais</a></p>
                </div>
              </div>
        </div>       
    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Anterior</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Próximo</span>
    </a>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .