How to increase the margin of container fluid without destroying responsiveness
username
I want to add some margin to the container fluid, but when I do that, I get horizontal scrollbars and the grid is broken. How to do this without other side effects?
<div class="container-fluid">
<div class="row">
<div class="col-md-3 d-flex align-items-center justify-content-center">
<mat-form-field class="choose-appointment-date" appearance="fill">
<mat-label>Choose an appointment date</mat-label>
<input matInput [matDatepicker]="picker" [min]="minDate" (dateChange)="getSelectedDate($event)"
class="form-control" [formControl]="appointment_date" disabled>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker touchUi #picker disabled="false"></mat-datepicker>
</mat-form-field>
</div>
<div class="col-md-9" *ngIf='availavable_appointment_hours_test'>
<h3 *ngIf='availavable_appointment_hours_test.length'>Availavable termins for: {{ selected_appointment_date }}
</h3>
<h3 *ngIf='!availavable_appointment_hours_test.length' class='red'>There are not availvable dates for:
{{ selected_appointment_date }}</h3>
<div class="row">
<div class="card col-lg-2 make-appointment-card" *ngFor="let hour of availavable_appointment_hours_test">
<div class="card-body" (click)="selectAppointmentHour(hour)">
<div class='text-center'>{{ hour.value }} </div>
</div>
</div>
</div>
</div>
</div>
</div>
.container-fluid {
margin: 50px !important;
}
Arleigh Hix
Set .container-fluidit to 100%width (same width as the window) and add a fixed margin pxto it (not responsive), so your page is always 100px wider than the window.
You need to use responsive margins for left and right, and set a small responsive width.
Please try one of the following examples:
.container-fluid {
margin: 50px 10% !important;
width: 80%;
}
.container-fluid {
margin: 50px auto !important;
width: 92%;
}