Bootstrap 3 and Media Queries

HTML & CSS
1

Hi

I am looking to use media queries in Bootstrap 3.

They say on the documentation to use it like this:

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }

I have put this in my CSS, but the main text in the middle doesn’t change:

				/* Small devices (tablets, 768px and up) */
				@media (min-width: @screen-sm) {
					.tw-header-title {
						font-size: 54px;
					}
				}

				/* Medium devices (desktops, 992px and up) */
				@media (min-width: @screen-md) {
				    .tw-header-title {
						font-size: 40px;
				    }
				}

Here is a link to the site, where text says
“Choose your classes or
commite to the full experience.”:

http://www.chrisdrogaris.com/temp/PROJECT%20-%20mint/main.html

Any ideas?

Thanks,
Chris

2

Hi,

The “@screen-md” is a “less” variable and nothing to do with CSS. You would need to recompile the css through less to get the variables converted into pixel values. If you are not using less then just use the real pixel values that you need.

e.g.


/* Small devices (tablets, 768px and up) */
				@media  (min-width:[B] 768px[/B]) {
					.tw-header-title {
						font-size: 54px;
					}
				}

http://bootstrap.lesscss.ru/less.html

3

Thanks for the help. Ended up using what you used.

Feel like I am falling behind in web programming… have to catch up.

4

Don’t worry, we are all playing catch up - even those of us who have been doing this for years struggle at times to keep abreast of the recent changes as things are changing so quick these days.