Responsive column structure

Radzen.Blazor Components
1

I used the row column structure shown below, but it is not responsive. If my screen is really small, the columns not seen below are displayed horizontally in one row. That is why the UI breaks.

Column 1 of 4 Column 2 of 4 Column 3 of 4 Column 4 of 4
2

Hi @AnkitaC,

We are not sure what your code is. Did you format it according to the forum guidelines?

3 
<RadzenRow class="rz-text-align-center rz-border-info-light" Gap="1rem">
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Column 1 of 4
    </RadzenColumn>
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Column 2 of 4
    </RadzenColumn>
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Column 3 of 4
    </RadzenColumn>
    <RadzenColumn class="rz-background-color-info-lighter rz-color-on-info-lighter rz-p-5">
        Column 4 of 4
    </RadzenColumn>
</RadzenRow>

I used above format

4

You may also need to specify the target column sizes depending on the device e.g.

<RadzenColumn SizeSM="6" SizeMD="3" ... />

More info is available here: Blazor Column Component | Free UI Components by Radzen

1 Like