Bootstrap min-width: 480px and max-width: 768px - fix the frustration

[greasemonkey]

Hi all, I've been up and running for several months now with my 2.3.4BS store - things are moving along very well.

 

However, I've had a continuous frustration with bootstrap and their "missing" break point for 480px to 768px (a horizontal smart phone screen).

 

Here is my half ass attempt to fix it - please feel free to comment (and or fix it).... I'd love to hear if I'm on the wrong path.....

 

in user.css add

@[member=media] (min-width: 480px) and (max-width: 768px) {
  .col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12 {
    float: left;
  }
  .col-ms-12 {
    width: 100%;
  }
  .col-ms-11 {
    width: 91.66666667%;
  }
  .col-ms-10 {
    width: 83.33333333%;
  }
  .col-ms-9 {
    width: 75%;
  }
  .col-ms-8 {
    width: 66.66666667%;
  }
  .col-ms-7 {
    width: 58.33333333%;
  }
  .col-ms-6 {
    width: 50%;
  }
  .col-ms-5 {
    width: 41.66666667%;
  }
  .col-ms-4 {
    width: 33.33333333%;
  }
  .col-ms-3 {
    width: 25%;
  }
  .col-ms-2 {
    width: 16.66666667%;
  }
  .col-ms-1 {
    width: 8.33333333%;
  }
  .col-ms-pull-12 {
    right: 100%;
  }
  .col-ms-pull-11 {
    right: 91.66666667%;
  }
  .col-ms-pull-10 {
    right: 83.33333333%;
  }
  .col-ms-pull-9 {
    right: 75%;
  }
  .col-ms-pull-8 {
    right: 66.66666667%;
  }
  .col-ms-pull-7 {
    right: 58.33333333%;
  }
  .col-ms-pull-6 {
    right: 50%;
  }
  .col-ms-pull-5 {
    right: 41.66666667%;
  }
  .col-ms-pull-4 {
    right: 33.33333333%;
  }
  .col-ms-pull-3 {
    right: 25%;
  }
  .col-ms-pull-2 {
    right: 16.66666667%;
  }
  .col-ms-pull-1 {
    right: 8.33333333%;
  }
  .col-ms-pull-0 {
    right: auto;
  }
  .col-ms-push-12 {
    left: 100%;
  }
  .col-ms-push-11 {
    left: 91.66666667%;
  }
  .col-ms-push-10 {
    left: 83.33333333%;
  }
  .col-ms-push-9 {
    left: 75%;
  }
  .col-ms-push-8 {
    left: 66.66666667%;
  }
  .col-ms-push-7 {
    left: 58.33333333%;
  }
  .col-ms-push-6 {
    left: 50%;
  }
  .col-ms-push-5 {
    left: 41.66666667%;
  }
  .col-ms-push-4 {
    left: 33.33333333%;
  }
  .col-ms-push-3 {
    left: 25%;
  }
  .col-ms-push-2 {
    left: 16.66666667%;
  }
  .col-ms-push-1 {
    left: 8.33333333%;
  }
  .col-ms-push-0 {
    left: auto;
  }
  .col-ms-offset-12 {
    margin-left: 100%;
  }
  .col-ms-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-ms-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-ms-offset-9 {
    margin-left: 75%;
  }
  .col-ms-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-ms-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-ms-offset-6 {
    margin-left: 50%;
  }
  .col-ms-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-ms-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-ms-offset-3 {
    margin-left: 25%;
  }
  .col-ms-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-ms-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-ms-offset-0 {
    margin-left: 0;
  }
}

Originally, product listing uses the below code to give a break from 3 columns to 1 column at a "sm" screen resolution of 768px with;

    $prod_list_contents .= '<div class="item list-group-item col-sm-4">';

Going from 3 columns to 1 is excessive IMO but necessary under the BS css. The problem I have with this in product listing is.... it requires a very lengthy product_listing on smaller screens.

 

Many people (myself included) browse on their smart phones horizontally... And the below change gives 1 column for xs (below 480px), 2 columns for the what I've called (I just stole the idea from here ) "ms/midsize" (between 480px and 768px) and 3 columns for sm, greater 768px. 

 

An example of how this is used this using the css above..... to "fix" the long product listing is;

    $prod_list_contents .= '<div class="item list-group-item col-ms-6 col-sm-4">';

Most important for me.... it allowed me to increase the size of my add to cart button.

[burt]

I was gonna say it looks likes AndyL's code ... then saw your link...

Add the code into user.css, don't try to change the Bootstrap css files.

 

Future:

v4 Bootstrap brings the extra breakpoint as standard.

HOwever it will take time for v4 to get out of Beta testing and then further time to integrate into osCommerce.

[piernas]

It works great! thanks to @@AndyL and @@greasemonkey.

[PupStar]

@@greasemonkey

 

Sorry to resurrect an old thread but is it possible to get this working with the new products module on the index page?

 

I have tried but it does not seem to change anything

 

Thanks

 

Mark

[greasemonkey]

@@PupStar I'm sure... have you added the code to your user.css?

 

Then look in the template file for the new product module (I presume the content module is what you are looking to change?)

[PupStar]

@@PupStar I'm sure... have you added the code to your user.css?

 

Then look in the template file for the new product module (I presume the content module is what you are looking to change?)

@@greasemonkey

 

yeah done that now thanks, not sure what I was doing wrong lol