I am in the process of designing a website that includes a left sidebar and Bootstrap 4 fixed size cards in the main content area.
However, when the viewport size is toggled from >768px to smaller sizes, the page content does not respond as expected, resulting in overlap and compression.
The issue seems to be related to the @media(min-width:768px) code snippet. Take a look at it for clues on how to resolve the problem.
$("#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;
}
#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;
}
....(remaining code unchanged)
How can this issue be corrected? Your assistance is greatly appreciated.