For a React project, I initially used CSS but switched to SASS for incorporating a "dark mode" feature.
To organize my files according to the documentation, I also utilize bootstrap.
/* App.scss */
@import "~bootstrap/scss/bootstrap.scss";
@import './styles/_themes';
@import './styles/_fonts';
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-secondary;
@include themed() {
color: t($title-color)
}
}
p {
font-family: $font-family-primary;
@include themed() {
color: t($text-color)
}
}
hr, .nav-tabs {
@include themed() {
border-color: t($text-secondary-color)
}
}
.base {
height: 100%;
width: 100%;
@include themed() {
background-color: t($background-color)
}
}
.main {
width: 750px;
@include themed() {
background-color: t($background-color)
}
}
Initially, I suspected a bootstrap issue, but even my own breakpoints are being overlooked in my files.
/* Footer.scss */
@media (max-width: 767px){
#footer h5 {
padding-left: 0;
border-left: transparent;
padding-bottom: 0px;
margin-bottom: 10px;
}
}
I created a simplified example and shared it on codesandbox: https://codesandbox.io/s/immutable-fire-qu9oe
Please test by resizing the screen and observe the media breakpoints not functioning correctly.
Any insights on what could be wrong?
Thanks! - EDIT:
With guidance from robertp's response, I was able to rectify my custom media breakpoints.
How can I address issues with bootstrap ones?
For instance, in my navbar I have a media breakpoint set:
/* Navbar.scss */
@media (max-width: 571px) {
.collapsing {
@include themed() {
position: absolute !important;
z-index: 3;
width: 100%;
top: 75px;
}
}
.collapse.show {
@include themed() {
display: block;
position: absolute;
z-index: 3;
width: 100%;
top: 75px;
}
}
.navbar.open {
@include themed() {
transform: translate(0, 0)
}
}
.overlay.open {
@include themed() {
height: 100%;
opacity: 1;
}
}
}
Despite efforts, this approach didn't work. How can I correct all bootstrap grid system classes as well?
EDIT 2:
The issue stemmed from import order. Arranging the bootstrap import at the end of the file resolved the problem!