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

MultiMotorsports

Member
  • Posts

    1
  • Joined

  • Last visited

  1. 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; } }
×
×
  • Create New...