告诉div根据屏幕大小更改大小时遇到​​问题

Question

I am making site in Dreamweaver(with bootstrap.) I am trying to tell the div to be at 75% width when screen is larger then 992px, and 100% width when screen is smaller then 992px. Any ideas what i might be doing wrong?

@media (min-width: 768px) and (max-width: 991px){
}
 .bar {
   width: 100%;
   background-color: #C54345;
}
@media (min-width: 992px) {
}
 .bar {
   width: 75%;
   background-color: #C54345;
}

Answer 1

It very well could be being overridden. A good way to check this is by launching your project in the browser and using the Developer Tools to see what CSS is being overridden denoted by a slash going through it.

Typically though, I wouldn't take this sort of approach. I don't know your exact situation, but doing this isn't really going to cut it in the terms of standards.

Instead, because you're using bootstrap, I suggest looking in to "hidden-xs"/"visible-xs" classes built in to bootstrap. I'm guessing you're trying to do something different on a tablet than you would a larger screen size or vice-versa.

Answer 2

You have brackets in the wrong places, you've closed the media query braces immediately after you opened them! otherwise the code is fine.
Your code should look like this:

@media (min-width: 768px) and (max-width: 991px){
    .bar {
       width: 100%;
       background-color: #C54345;
    }
}
@media (min-width: 992px) {
     .bar {
       width: 75%;
       background-color: #C54345;
    }
}

working demo here