Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...
  • 11 months later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...