SASS Breakpoints Definition:
/* For the grid */
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1660px
);
Structure of My Columns:
<div id="footer_lower_menus" class="row">
<div class="fui_col col col-sm-12 col-md-6 col-lg-4">
...
</div>
<div class="fui_col col col-sm-12 col-md-6 col-lg-4">
...
</div>
<div class="fui_col col col-sm-12 col-md-6 col-lg-4">
...
</div>
</div>
Expected Behavior: Columns should take up one third of the space on lg screens and wider, one half on md screens, and full width on sm screens or smaller (like xs).
Current Issue: The columns are resizing correctly for larger screens, but for sizes smaller than sm (specifically xs, which is set to zero), the columns are reverting back to one half or one third (not applying the specified breakpoints).
Note: The content within the columns contains text and is constrained by a "max-width" of 100%.
What am I missing or doing wrong in this setup? How can I make the columns adjust for "sm or smaller" instead of "sm only"?