Mobile Breakpoint Setting Not Working on Brine

Hi,

I changed the "mobile breakpoint" to 1000px (just to test, but will probably keep about this size, and only the menu changes at that size from a full navigation to a hamburger type.

The grid and the pages with images do not stack into a single column until the typical 640px breakpoint.

Does anybody know how to get around this? I need all the columns - grid gallery and page layout - to go to one at 1000px wide.

Thanks!

Got the same problem and it's really frustrating – would really appreciate a solution.

I entered this in my sitewide css.  I use it to change the mobile breakpoint of my product page and the category menu.  It took me a few hours, but I figured out how to make it work.  See the link below.  You can adjust the window size and watch it shift at 800 pixels instead of 640 pixels.

https://www.multimotorsports.com/trailer-accessories

@media screen and (max-width: 800px){
.ProductList-filter-dropdownToggle-label {
    display: block;
  }
}
@media screen and (max-width: 800px){
.ProductList-filter {
    margin: 0 0 0px 0;
    float: top;
  }
}
@media only screen and (max-width: 800px) {
.ProductList-filter-list {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
.ProductList-filter-dropdownToggle-checkbox:checked~.ProductList-filter-list {
    display: block;
    margin-top: 10px;
  }
}
@media screen and (min-width: 801px){
.tweak-product-list-filter-display-left-side .ProductList-filter, {
    float: left;
    width: 20%;
    padding: 0 15px 0 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media only screen and (min-width: 801px) {
.tweak-product-list-filter-display-left-side .ProductList-filter+.ProductList-grid {
    clear: none;
    float: left;
    width: calc( 80% +15px );
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media only screen and (max-width: 800px) {
.tweak-product-list-filter-display-left-side .ProductList-filter+.ProductList-grid {
    clear: both;
    float: none;
    width: calc( 100% );
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
}
@media only screen and (max-width: 800px) {
.ProductList-grid {
    clear: both;
    margin: 0 -15px -15px 0;
    width: calc( 100% );
  }
}
@media screen and (max-width: 800px) {
.sqs-layout .spacer-block {
    padding: 1px !important;
  }
}
@media screen and (max-width: 800px) {
.tweak-product-list-filter-display-left-side .ProductList-filter {
    width: 100%;
    padding-bottom: 20px;
  }
}