How to add break points for the following scenario? - html

Question

Below image is the mobile view representation of the current scenario -
Here, Orange part represents second div ( DIV 2). Div 3 is a navbar. What I intend to achieve is that in this mobile view, I want that the entire width of div 3 should collapse to the width of a hamburger, sub divs should come in one line and the hamburger icon should come next to it. Something like this -
You can take any random thing in the div to test this scenario ( paragraph, heading etc.)
I am struggling to put the subdivs and the hamburger in one row. Right now I am using bootstrap grid structure to place items. Maybe, I'll need to put the second and third div in a single flexbox. How do I add breakpoints in that?
<div>
<p>DIV1</p>
</div>
<div class="second-div">
<div class="row">
<div class="col-sm-6 justify-content-start">
<p>sub-div1</p>
</div>
<div class="col-sm-6 justify-content-end">
<p>sub-div2</p>
</div>
</div>
<div class="third-div">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</div>
Can anyone please help?

Answer 1

I recommend using CSS-Flexbox to solve your Problem. the following example gives you an overview to get a similar result as you posted in your Question:
body{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
/*for smartphone / mobile*/
#media only screen and (max-width: 600px) {
.wrapper{
width: 100%;
height: 20%;
/*the following 3 lines make your Element behave as a flexbox element, the way it should behave and how it positions the elements inside of it*/
display: flex;
flex-direction: row;
justify-content: space-between;
}
.div1{
display: none;
}
.container-subdivs{
width: 80%;
height: 100%;
/*the following 3 lines make your Element behave as a flexbox element, the way it should behave and how it positions the elements inside of it*/
display:flex;
/*flex-flow is a combination of flex-direction and flex-wrap*/
flex-flow: row nowrap;
justify-content: space-between;
}
.subdiv1{
width: 10%;
height: 100%;
background-color: orange;
}
.subdiv2{
width: 15%;
height: 100%;
background-color: red;
}
.subdiv3{
width: 15%;
height: 100%;
background-color: yellow;
}
.div3{
height: 100%;
width: 15%;
background-color: pink;
}
}
/* for normal desktop, tablet etc.*/
#media only screen and (min-width: 601px) {
.wrapper{
width: 100%;
height: 100%;
}
.div1{
width: 100%;
height: 2%;
background-color: purple;
}
.container-subdivs{
width: 100%;
height: 20%;
/*See above comments*/
display:flex;
flex-flow: row wrap;
}
.subdiv1{
width: 80%;
height: 60%;
background-color: orange;
}
.subdiv2{
width: 20%;
height: 60%;
background-color: red;
}
.subdiv3{
width: 100%;
height: 40%;
background-color: yellow;
}
.div3{
margin-top: 4vh;
height: 20%;
width: 100%;
background-color: pink;
}
}
<div class="wrapper">
<div class="div1">
div1
</div>
<div class="container-subdivs">
<div class="subdiv1">
subdiv1
</div>
<div class="subdiv2">
subdiv2
</div>
<div class="subdiv3">
subdiv3
</div>
</div>
<div class="div3">
div3
</div>
</div>
The key here is how to set the flex-direction and flex-wrap behaviours, also you need enough elements to wrap several other elements to make them behave in the same way. To find your final solution you need to add a few elements and the css for your hamburger-menu, you will eb able to figure this out yourself.
check THIS to understand what is happening here and how to finalize the approach. Good luck and dont be afraid to ask additional questions in the comments.

Answer 2

well. you have to use css3 grid instead. use CSS3 AND MEDIA QUERYIES to develop the layout like this.
checkout the code here
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
/* On screens that are 992px or less, set the background color to blue */
#media screen and (min-width: 600px) {
body {
background-color: blue;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"right right header header . . . menu menu menu footer footer";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"right right right right right right header header header header header header"
"menu menu menu menu menu menu menu menu menu menu menu menu"
"footer footer footer footer footer footer footer footer footer footer footer footer";
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}