How to customize the button responsive based on the size of the browser-window?

Question

I have a ServerApp (Blazor .net6). And I have a window with 1 or more buttons.

• If the window (browser-window) is large than there will be shown max 3 buttons shown on one row.
• If the window is small, than there will be shown 1 button on one row.
• There at the end of the row has a rounded end.
• The buttons has a border. So I can't use overflow-hidden.

How can I give the first button a rounded end by a small window, the second by a medium-large window and a third button a rounded end by a large window?

<h3>Component</h3>

@if (model != null)
{
    bool isStatusX = model.Status == StatusEnum.Description(StatusEnum.X);
    bool isStatusY = model.Status == StatusEnum.Description(StatusEnum.Y);
    bool hasRoundEnd = false;
    int index = 0;

    <div id="buttons">
        <ul class="nav col-12 col-md-auto mb-md-0 justify-content-md-end">
            @if (isStatusX)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 1" OnClick=@EventOne />
                </li>
            }

            @if (isStatusY)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 2" Url=@url OnClick=@EventTwo />
                </li>
            }

            @if (isStatusX)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 3" OnClick=@EventThree />
                </li>
            }

            @if (isStatusX || isStatusY)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 4" OnClick=@EventFour />
                </li>
            }
        </ul>
    </div>
}

@code {
    private int indexhasRoundEnd = 0;
    protected override void OnInitialized()
    {
        // Something like this?
        if (@media(min-width:481px) == true)
            indexhasRoundEnd = 1;
        if (@media(min-width:961px) == true)
            indexhasRoundEnd = 2;
        if (@media(min-width:1200px) == true)
            indexhasRoundEnd = 3;
    }
}

Any suggestion is appreciated. Thank you!

or

Answer 1

As Axekan said. You're probably going to need something similar as calling your Child:parent. You call your css class and change it depending on size of the screen

@media (min-width: 1200px) {
    h1 (old code), .h1(new code) {
        font-size: 2.5rem;
    }
}