Button mobile device responsive

Asked

Viewed 241 times

0

How could do with this button fit when and for mobile device?

inserir a descrição da imagem aqui

When it’s for PC it gets right.

inserir a descrição da imagem aqui

This is the code.

<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>
css html5 bootstrap-4 responsive-layout button

  • Removing the button in the mobile version is an alternative?

  • try to create a class for it and use a media queries ex.: @media(max-width: 480px) {//sua função aqui!} if it helps read this article from w3school: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

1 answer

0

Change your class text-right for text-center and add another class text-sm-right. This will cause the element to align the text (including the button) to the center when the resolution (width) is less than 576px (-sm) and right when it’s greater than that.

Behold:

Run full screen and change the window size.

<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>

Browser other questions tagged css html5 bootstrap-4 responsive-layout button

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