Embarking on the journey of responsive website design as a beginner in front end development, I am currently working on creating a basic angular chat application with bootstrap. Keeping responsiveness in mind throughout the design process is my goal, but I seem to face challenges when nesting flex boxes, indicating a gap in my understanding. Here are the views I envision for larger and smaller devices:
Large:
https://i.sstatic.net/Jht7R.png
Small device (note I have not done anything to make the settings change to a button):
https://i.sstatic.net/pd82o.png
However, the reality I am experiencing when using h-100 reveals a different outcome:
https://i.sstatic.net/fCoWR.png
Upon analyzing the issue, it appears that applying h-100 with col-12 causes the left side to occupy all the space, pushing the right side off the page. I attempted achieving a similar appearance with flex-fill and flex-grow-1, but these classes did not impact the document as expected. Here is the snippet of my code:
<app-header></app-header>
<div class="container-fluid" id="mainContent">
<div class="row h-100 flex-column-reverse flex-md-row">
<div class="col-md-3 col-12 flex-fill">
<div class="d-flex flex-column h-100 justify-content-between">
<div>
<app-channels></app-channels>
</div>
<div>
<app-settings></app-settings>
</div>
</div>
</div>
<div class="col-md-9 col-12">
<app-messages></app-messages>
</div>
</div>
</div>
(app-messages also uses h-100 to fill the screen)
custom scss:
@import "../node_modules/bootstrap/scss/bootstrap";
html, body {
height: 100% !important;
width: 100% !important;
}
Is there a way I can achieve the desired switching between views posted above using pure flexbox instead of relying on h-100? Are there responsive classes like h-sm-100 that only apply 100% height on small screens and above?
Thank you for your assistance.