Media Queries Question

Bootstrap Studio Help
1

Hi,

I am puzzled as to how media queries work within this program. I've coded my own media queries (by hand) and they work. However, when I try to apply them to Bootstrap Studio, something goes awry. Uh oh! ?

A basic example:

Say that I add an H2 tag:

h2 { font-size: 3em; }

Then, I add a media query:

@media (min-width: 300px) h2 { font-size: 1.5em; }

When I try out the various screen size options, I only see the font size (1.5em) from the media query. However, with larger screens, I should see the 3em font size, which I don't. Anything that I'm missing or overlooking here?

Any ideas or guidance would be appreciated! ? Thank you.

2

oh, my!

You're going to have to do some reading up on Bootstrap. One of the main functions of Bootstrap is its pre-defined breakpoints.

I would seriously grab some popcorn and sit back and enjoy the videos... I like the Tesla video.

3

I am familiar with the basics of Bootstrap, but when it comes to text, I don't believe Bootstrap automatically scales it. I am wanting to scale text based upon the various screen sizes, but my media queries aren't working as expected.

4

You are correct. Bootstrap does not scale text. This has been discussed... I will try and find it.

5

I searched, but didn't find anything. I might of used the wrong keywords, etc.

I did some more testing and noticed the following:

  • If all the H2 selectors have media queries applied to them, it works. However, if I have one H2 (without a media query applied to it), it overrides all H2 selectors with media queries applied. (I also tried changing the order of the selectors in the CSS script to see if that made a difference -- it strangely didn't.)

Hmm.

6

https://bootstrapcreative.com/can-adjust-text-size-bootstrap-responsive-design/

7

Thank you! I appreciate you looking this up for me... Much appreciated. ?

8

:) glad to help.

9

Responsive font sizes are now part of BSS as of Bootstrap 4.3, however, this is turned off by default.

Here is how you can enable this: https://github.com/twbs/rfs

10

You’re reading your media query wrong. Or you wrote it wrong.

It says screen sizes greater than 300px wide change the font site to 1.5em.

Saj

11

I’m going to take a guess here that most likely you have your classes in the wrong order.

12

Ugh... ditch the ems. You could also do something like this... h1 { font-size: calc(24px + 1vw); } This will scale up the text proportionately with the size of the screen

13

it's been discussed here a few weeks ago.

hth