Twitter Bootstrap 3: How to Use Media Queries

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



Leave a reply



Submit