Bootstrap 3.0 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/

Bootstrap 3.0 Media queries

The bootstrap documentation is a little unclear.

Using these @... parameters for min-width is in fact less syntax, not CSS.

You should use the customize utility in Bootstrap (see Media queries breakpoints) to set up what you want these screen-xxx parameters to be (e.g. set screen-sm to be 768px).

And then when click the Compile button in the bottom, the less code is compiled to CSS. this compilation will replace all occurrences of @screen-sm with 768px, and the same for the other parameters.

Bootstrap 3 - media queries Tablet Breakpoints

-- EDIT 2 --

I did more digging on your full site. I recreated your site locally and used a new version of bootstrap CSS, changing the break point to 767 px. I then changed the breakpoints in your custom CSS to 767 px. There was still an issue loading on iPads, the full site was still loading.

Upon further research I noticed the CSS sheet that you are referencing on a CDN for "Bootstrap Gallery". The issue is with this file. This file mentions includes the media queries for bootstrap! After making the changed above and commenting out this file, the site loads in mobile form for iPads in Portrait.

<!-- Bootstrap Gallery -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

-- EDIT 2 --

-- EDIT --

Twitter bootstrap was intended to show the full screen site for Tablets. Note that small devices show the full menu while extra small devices show the mobile menu.

The break point set for small screens is at 768px - the width of the iPad in portrait mode - so the iPad renders as small screen. TO have the iPad render as an extra small device in portrait mode (with the mobile menu), change the min-width to 767px for the small screen break point.

https://github.com/twbs/bootstrap/issues/2155

-- END EDIT --

I'm curious if this happens in both the portrait and landscape modes for the tablets you are testing or ONLY in the landscape mode.

I would expect this to happen in Landscape mode with the standard Bootstrap settings as the width of an iPad is 1024x and the medium breakpoint for bootstrap is 992px. Note that the iPad falls into that Medium category and Medium shows the the full menu and not the mobile menu.

If you want to change the breakpoints you can also do this by setting up a custom bootstrap instance. Change the medium break point to somewhere around 1030px:
http://getbootstrap.com/customize/#media-queries-breakpoints.

The issue here is that people on smaller laptops will get your mobile menu if they don't have your website in full screen.

bootstrap version 3 - how to use a custom image for specific media query

There are a lot of ways to do this. I'll walk you through three of them. Also note, I usually use Bootstrap-Sass, so I'll show you how to do it with that version of the framework (LESS would be very similar).

1- Media queries aren't designed to switch between different assets like you are trying to do. You really want to use srcset, a new feature of CSS that automatically switches images based on the type of device connecting to your server (A List Apart has a great article on the concept).

srcset adds a new parameter to img tags in your HTML, and you provide the source set of imagery to the tag. The browser determines when / how to provide the assets. This gives you a big performance bump on image heavy sites because the browser only has to download one of the assets.

Your code would look something like this:

<img 
    srcset="logo_desktop.jpg  768w,
            logo_smallphone.jpg 310w"
    sizes="50vw, 100vw"
    src="logo_desktop.jpg"
    alt="My site's logo file" />

srcset is where you provide the image declarations and their pixel widths. In this example, I'm saying your desktop image is 768px wide and the mobile image is 310px wide.
sizes is how much space the image takes up on the page. In this example, I'm saying the desktop image takes up half the screen while the mobile image takes the full width of the screen.
src acts like a fallback for browsers that don't understand any of the new parameters.

2- If you want to control image substitution with media queries, it's trickier but doable. Bootstrap does give you four breakpoints to use (see the documentation for more guidance):

@screen-xs-min / @screen-xs-max
@screen-sm-min / @screen-sm-max
@screen-md-min / @screen-md-max
@screen-lg-min / @screen-lg-max

You'd have to add the images as background images and use combination media queries to get the job done. A mobile-first approach would look something like this:

.my-logo-style {
  background-image: url('images/logo_smallphone.jpg'); 

  @media (min-width: @screen-sm-min) and (orientation: landscape) {
    background-image: url('images/logo_desktop.jpg');
  }
}

3- Lastly, you could also just show/hide images with media queries which incurs loading both images for your user but would probably get the job done.

HTML:

<div class="desktop">
  <img src="logo_desktop.jpg" alt="Logo" />
</div>

<div class="mobile">
  <img src="logo_smallphone.jpg" alt="Logo" />
</div>

Sass:

.desktop { 
  @media (max-width: @screen-sm-max) {
    display: none;
  }
}

.mobile {
    @media (min-width: @screen-sm-min) {
    display: none;
  }
}