Media Query 992 LG not working

Bootstrap Studio Help
#1

Hello Team. I love this product, its amazing :) But i can not find the problem.

<h2 class="text-white lead" id="sidebar_card_title">David</h2>

@media (min-width: 992px) { #sidebar_card_title { font-size: 15px; } }

@media (min-width: 768px) { #sidebar_card_title { font-size: 9px; } }

@media (min-width: 1200px) { #sidebar_card_title { font-size: 20px; } }

The media query 992 doesnt work. It use 9px...But why? I have a mistake? This is all the style.css

#2

@david19 next person without any basics... jeez chris You have to use "max-width" too... otherwise it wont work.... for an example

@media (min-width: 1200px) and (max_width: 1399.98px)

That's all what you need...

The reason why 2 first options/css code doesn't work properly is cause they don't have the limit of "width" that's why

#3

@dickykreedz: Yes, that works!! Thanks for the great support here.

#4

@david19 Just in case, if you wanna change one css attribute like "the same one" in the same class or id for an example

font-size: 24px

you have to put the "limit" and the limit is the next "min-width" but it cant be the same number in pixels for an example:

@media (min-width: 768px) and (max-width: 991.98px)
@media (min-width: 992px) and (max-width: 1199.98px)

In the max-width you have to put there 0.02px less than the max of next min-width. I have hope that i explained it clearly c: I'm glad that i could help ya. Have fun and Goodluck!

#5

@dickykreedz Many thanks sir :D

#6

@david19 No worries man, You're Welcome and Goodluck learning css and other stuff including Bootstrap Studio!

#7

You could also just "drag" the css block for 768 up above the 992.

@media (min-width: 768px) {
#sidebar_card_title {
font-size: 9px;
}
}

@media (min-width: 992px) {
#sidebar_card_title {
font-size: 15px;
}
}

@media (min-width: 1200px) {
#sidebar_card_title {
font-size: 20px;
}
}

You still would need a setting for the lower tier(s).

#sidebar_card_title {
  font-size: 5px;
}