Twitter Bootstrap 3: how to use media queries?
Bootstrap 3
Here are the selectors used in BS3, if you want to stay consistent:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Note: FYI, this may be useful for debugging:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
Bootstrap 4
Here are the selectors used in BS4. There is no "lowest" setting in BS4 because "extra small" is the default. I.e. you would first code the XS size and then have these media overrides afterwards.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Bootstrap 5
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}
Update 2021-05-20: Info is still accurate as of versions 3.4.1, 4.6.0, 5.0.0.
Writing Bootstrap 3 Media Queries
You have it backwards. You need to have the default come before the media queries. This assumes a mobile-first approach. For example, from the documentation:
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
So your code would actually look like:
.aboutBlock{
font-size: 25pt; /*I WANT THIS TO BE THE DEFAULT FOR ALL OTHER SCREENS*/
font-family: asap-bold;
}
@media(max-width:768px){
.aboutBlock{
font-size: 12pt;
}
}
Live jsbin example: https://jsbin.com/nunuba/
Issues with media queries CSS
Try changing your first media query to this:
@media screen and (min-width: 480px) and (max-width: 1023.99px) {
...
}
.cards:nth-of-type(3n)
and .cards:nth-of-type(even)
seem to both be applied.
Related Topics
Css Transform Doesn't Work on Inline Elements
Bootstrap Navbar With Left, Center or Right Aligned Items
Change a Html5 Input'S Placeholder Color With Css
In CSS Flexbox, Why Are There No "Justify-Items" and "Justify-Self" Properties
How to Place Two Divs Next to Each Other
What Does a Space Mean in a CSS Selector? I.E. Difference Between .Classa.Classb and .Classa .Classb
How to Get Div Height to Auto-Adjust to Background Size
Child Inside Parent With Min-Height: 100% Not Inheriting Height
What Does the "≫" (Greater-Than Sign) CSS Selector Mean
Canvas Has White Space At the Bottom and Scrolls Too Far
What Does the "+" (Plus Sign) CSS Selector Mean
Does Height and Width Not Apply to Span
Prevent Content from Expanding Grid Items
Center a 'Div' Vertically in a % Height 'Div'
In Which Order Do CSS Stylesheets Override