Como poderia fazer com esse button se ajeita quando e para dispositivo mobile?
Quando é para PC ele fica certo.
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>
@media(max-width: 480px) {//sua função aqui!}
se for ajudar leia este artigo da w3school: w3schools.com/css/css_rwd_mediaqueries.asp