I made 3 buttons that go on a picture ( right side). When the screen is small, the buttons don't follow the layout, so they go over all the picture. How would i make them either smaller, or preferably, going after the picture when it's 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="/" >
            <img class="img-circle" src="/Images/Partners/Trudel.png" width="100 px">
        </a>
        <a class="btn btn-circle mr-3" href="/" >
            <img class="img-circle" src="/Images/Partners/jeunesNaturalistes.jpg" width="100 px">
        </a>
        <a class="btn btn-circle mr-3" href="/" >
            <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>

I made 3 buttons that go on a picture ( right side). When the screen is small, the buttons don't follow the layout, so they go over all the picture. How would i make them either smaller, or preferably, going after the picture when it's 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/" >
            <img class="img-circle" src="/Images/Partners/Trudel.png" width="100 px">
        </a>
        <a class="btn btn-circle mr-3" href="https://www.jeunesnaturalistes./" >
            <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>

• css
• asp-core
• bootstrap-4
• blazor

1 Answer 1

Maybe I misunderstood what you are looking for, but I think your best bet would be a css media query that looks something like this

/* On screens that are 992px or less */
@media screen and (max-width: 992px) {
  .containerHome {
    display: flex;
    flex-direction: row-reverse
  }
  .containerHome div.FloatingTop {
     position: relative;
     width: 100%;
  }
}

The goal here being to stack the div and image in reverse. Might need more tweaking since I can't see the css of your classes.