Jump to content
greasemonkey

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.

Share this post


Link to post
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.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@@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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

@@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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×