As I work on designing a website, I am facing an issue with responsiveness that I am willing to accept for now. I am looking to establish a minimum width for the overall page to be around 1000px, with a horizontal scrollbar appearing if the screen width is below that. I attempted to implement the following code:
@media (max-width: 1000px) {
body {
min-width: 1000px !important;
}
}
However, this solution is not working as intended. While the scrollbar does appear, my DIVs are becoming disorganized. I am utilizing Bootstrap 4 with SASS. Is there a way to enforce this behavior?
Although I plan to create a fully responsive site in the future, I am focused on achieving this functionality for mobile and tablets at the moment. Unfortunately, my navbar is experiencing significant issues when the screen width is under 1000px.
EDIT: I have included an example codepen with the code for my navbar, which falls apart under 992px: https://codepen.io/anon/pen/vJgGma