How can I adjust the size and layout of my buttons that go on a picture on the right side when the screen is small? Currently, the buttons overlap the picture. Is there a way to make them smaller or have them move below the picture on a small screen?
.btn-circle {
height: 125px;
width: 125px;
border-radius: 50%;
padding: 4px;
margin-right: 7px;
margin-left: 7px;
}
.img-circle {
border-radius: 50%;
height: 125px;
width: 125px;
}
@page "/"
<PageTitle>Accueil</PageTitle>
<div class="containerHome">
<div class="d-flex flex-row-reverse FloatingTop">
<a class="btn btn-circle mr-3" href="https://trudelauto.com/" >
<img class="img-circle" src="/Images/Partners/Trudel.png" width="100 px">
</a>
<a class="btn btn-circle mr-3" href="https://www.jeunesnaturalistes.org/" >
<img class="img-circle" src="/Images/Partners/jeunesNaturalistes.jpg" width="100 px">
</a>
<a class="btn btn-circle mr-3" href="https://amos-harricana.ca/visiter/" >
<img class="img-circle" src="/Images/Partners/tourismeHarricana.png" width="100 px">
</a>
</div>
<img src="/Images/home.png" alt="Labyrinthe des insectes" width="100%" />
</div>