When I view my form in the browser and zoom out, the form breaks into three columns,
First column is the title,Second column is the form,Third column is the buttons.
When I zoom back in, it remains in three columns which then requires me to horizontally scroll to the right to click the buttons, I would like to keep the form structure from top the bottom regardless of how the user zooms in and out, unfortunately I can't figure out where the issue is coming from.
<mat-step label="Legal" class="margin-top-32" [stepControl]="legalFormGroup" [completed]="legalFormGroup.valid" *ngIf="true"><div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-32"><i class="material-icons registration-stage-icon"> edit</i></div><div fxFLex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-32"><h2 class="text-centre font-bold"> Nearly there!<br /> To access you need to accept these conditions.</h2></div><form [formGroup]="legalFormGroup" fxLayout="column wrap" fxFlexOffset="25" fxFlex="50"><mat-checkbox id="new_user_agree_TandC" formControlName="new_user_agree_TandC"> I agree to <a href="#" target="_blank">Terms and Conditions</a></mat-checkbox><mat-checkbox id="new_user_agree_privacy" formControlName="new_user_agree_privacy"> I agree to <a href="#" target="_blank">Privacy Statement</a></mat-checkbox><mat-checkbox id="new_user_receive_vita_notifications" formControlName="new_user_receive_vita_notifications"> I would Like to receive notifications.</mat-checkbox><mat-checkbox id="new_user_auto-approved" formControlName="new_user_auto-approved" class="auto-approved-checkbox"><div>I understand that my account will be auto-approved with entry level access if my organisation has a designated Company</div><div>Administrator in AND the email domain used for account creation matches the existing Company domain.</div><div>Where this doesn't apply, account approval may be delayed while we contact my organisation for access confirmation.</div></mat-checkbox><div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-64" *ngIf="!processingRegistration"><button fxFlex="50" mat-stroked-button matStepperPrevious class="cancel-button"><< Back </button><button fxFlex="50" mat-flat-button type="submit" class="primary_two white-colour" [disabled]="!legalFormGroup.valid" (click)="performRegistration()"> Create Account >></button></div><div fxFlex="100" fxLayout="row" fxLayoutAlign="center center" class="margin-top-64" *ngIf="processingRegistration"><mat-progress-spinner [mode]="inderterminate" [diameter]="32"></mat-progress-spinner><p class="margin-left-10"> Registering you now...</p></div></form></mat-step>