0

I am trying to redefine the width of col-md-4. If I go directly to the bootstrap file and edit the code below, it works. But when I open a new css file and put in the codes below and redefine the width, it does not work. Why? The problem I am trying to solve is because in IE7, I have 2 items in a row instead of 3, so I am trying to reduce the width by redefining it, so that 3 items will be on a row. Perhaps there are other suggestions?

@media (min-width: 992px) {
.col-md-4 {
    width: 33.33333333%;
  }
}
Mike Causer
  • 8,196
  • 2
  • 43
  • 63
Lim Guang Jian
  • 90
  • 8

1 Answers1

0

A more specific selector would be applied. You can read more from this article.

For your case, you can rewrite the rules to be more specific or by adding an !important tag for the attribute.

.col-md-4.wide { /* Or another more specific selector */

OR

width: 33.33333333% !important;
Gavin
  • 4,458
  • 3
  • 24
  • 37
  • I tried using .col-md-4 span{} and putting the !important, but it still does not work. Perhaps the problem lies with using this 2 js files http://www.joostrap.com/blog/bootstrap-3-supporting-internet-explorer-8-and-9. This 2 js files is to make Boostrap support IE. I am sure you have heard of them? – Lim Guang Jian Jul 18 '14 at 06:47
  • If your elements were `span`, please use `span.col-md-4` selector. – Gavin Jul 18 '14 at 06:50
  • It works now when I had @media (min-width: 992px) {} removed! Now both ways you mentioned works! Thanks! – Lim Guang Jian Jul 18 '14 at 06:54
  • You are welcome. Seems that your problem is more related to this question then. http://stackoverflow.com/questions/18205253/ie7-ie8-support-for-css3-media-query – Gavin Jul 18 '14 at 06:57