How to make responsive the page content when sidebar toggled? - html

Question

I'm creating a webpage with a sidebar left. And Bootstrap 4 fixed size cards in the page content.
When it is toggled at view-port size - >768px to 100's of pixels, the page content is not act as responsively (overlapped and compressed all).
Why? look #media(min-width:768px){...}.
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
body {
overflow-x: hidden;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
width: 0;
height: 100%;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar {
left: 250px;
margin-left: -250px;
}
#wrapper.toggled .sidebar {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
}
#wrapper.toggled #page-content-wrapper {
margin-right: -250px;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#wrapper .sidebar {
width: 250px;
}
#wrapper.toggled .sidebar {
width: 0;
}
#page-content-wrapper {
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
<ul>
<li>Dashboard</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
<h1>Simple Sidebar</h1>
<a class="btn btn-secondary" href="#menu-toggle-left" id="menu-toggle">Toggle Left</a>
<div class="row">
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 1</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 2</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 3</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
<div class="col-6 col-sm-4 col-md-3 col-lg-2 mb-4">
<div class="card bg-primary" style="width:10rem;height:10rem;">
<div class="card-header">
<div class="card-title">Title 4</div>
</div>
<div class="card-body text-center">
<p>This is a paragraph</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
How to correct it? Thanks.

Answer 1

Here's a simple solution, add style="width:100vw;" to <div class="row"></div>
<div id="wrapper">
<div id="sidebar-wrapper" class="sidebar">
...
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
...
<div class="row" style="width:100vw;">
...
</div>
</div>
</div>