How to make responsive columns and row - html

Question

In my project I'm trying to make my help dialog like the design below pic but I'm not really sure how to make responsive to different size so I would be really appreciate If I can get any help or suggestion.
Right now in my laptop view everything is looking fine but when I switch to a screen size that is bigger than my laptop, I see a lot of empty space at the bottom of my help dialog.
<ng-container *ngIf="!isEditMode;else editMode">
<div class="topbar">
<h1 class="primary-text header" style="margin-left: 30px;">Help and About</h1>
</div>
<div mat-dialog-content class="dialog-container">
<div class="row">
<div class="column left">
<mat-nav-list>
<mat-expansion-panel class="exp-panel" *ngFor="let section of mappedSections">
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right">
<div *ngFor="let section of mappedSections">
</div>
</div>
</div>
</div>
<div fxLayout="row" fxLayoutAlign="center start">
<span style="flex-grow: 1;"></span>
<button mat-raised-button color="primary" mat-dialog-close [style.marginRight.px]="20"
matTooltip="Close Help">Close</button>
</div>
</ng-container>
CSS
.dialog-container {
width: 65vw;
height: 65vh;
overflow:hidden;
overflow-y: hidden !important;
padding: 2px;
margin: 0 20px;
}
.container-inside-dialog {
width: 100%;
height: 100%;
padding: 10px;
overflow:hidden;
overflow-y: hidden !important;
}
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
}
.left {
width: 37%;
position: relative;
height: 530px;
overflow-y: auto;
}
.right {
position: relative;
width: 63%;
height: 530px;
overflow-y: auto;
}
.button{
width: 287px;
text-align: left;
padding-left: 25px;
height: 47px;
}
/* Clear floats after the columns */
.row:after {
position: relative;
content: "";
display: table;
clear: both;
}

Answer 1

So you will need to look into using media rules
#media only screen and (max-width: 1000px) {
}
Anything inside this css rule will then be applied when the screen is smaller than 1000px. There is no set width these should be set to but as a rule of thumb I tend to use 768px as the breakpoint from desktop/laptop to tablets and smaller devices. You can input your own custom breakpoint by establishing what size screen the page starts to look broken or weird and using that px to apply different CSS.
Alternatively, I would recommend looking at the bootstrap grid framework which would resolve a lot of this issue for you!
Let me know if you have any other questions :)