Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Bill1965

Mobile Breakpoint Setting Not Working on Brine

Question

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!

Edited by Bill1965

Share this post


Link to post

3 answers to this question

Recommended Posts

  • 0

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;
  }
}

 

Edited by MultiMotorsports

Share this post


Link to post
  • 0

Important to know, according to Squarespace Support it's intended the breakpoint is only affecting the navigation area above:

"What you are seeing is intended behavior of the Mobile Breakpoint tweak in the standard Brine template's Site Styles. The breakpoint applies to the Mobile Navigation Styles that are designated in the Site Styles rather than the block placement, which is a more standard setting across the platform. You can still change this using custom code and make the mobile breakpoint affect other parts of the site, when the width of the screen is more than 640px."

 
Edited by isabel_n

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...