How to work with @media query

Hello, I am having a hard time understanding how to do @media query. I haven’t found a tutorial about it, can someone be so kind and explain it! Thank You.

It seems confusing but it really isn’t once you understand the basic theory of breakpoints. When building a website in Bootstrap Studio, you are already using breakpoints, though you may recognize them better by the different screen sizes… SM, MD, LG, XL, XXL

But because Boostrap is a mobile-first framework, XS is considered the “default” size, so it’s not actually shown. When you expand an Options in any Options panel that offers breakpoint settings, XS is the first breakpoint but it won’t show the characters XS. The first setting is the base size (often thought of as the “phone” size) and then you’ll only see SM, MD, LG, XL, and XXL.

Each of these breakpoint is associated with a different screen width in pixels. (< means less than, and ≥ means greater than or equal to.)

X-Small| (none) < 576px
Small (sm) ≥ 576px
Medium (md) ≥768px
Large (lg) ≥992px
Extra large| (xl) ≥1200px
Extra extra large (xxl) ≥1400px

So let’s do a short exercise. Start a new website and switch to the XS (phone) screen size in your workspace. Add a Paragraph element to the page (don’t worry about containers, rows and columns for now.) Select the Paragraph, go to the Attributes panel, and in the Class Name field, type the text myFont

image

Now let’s say we want the font to be 20 pixels and red on a phone, but 28 pixels and blue on a desktop. In Bootstrap, we know the phone is the base size, so we start by creating the CSS class and rules that will style the text.

With the Paragraph selected, go to the Design panel > Styles and open the styles.css file. Now go to the Styles panel, click Create, and you should see a new class appear called .myFont. Click inside on one of the brackets { to add a new rule, and type in what you see below… (tip: using the tab key comes in handy when writing multiple CSS rules)

image

Now in the workspace, you should see the font size has changed to 20 pixels, and color has changed to red.

So how do you it change to 28 pixels and blue at the desktop size? By using a media query!

And the great thing about Bootstrap Studio is you don’t even need to type media queries by hand. BSS has an option that will allow you to add them automatically through a menu selection. But first, you need to create the necessary changes to the CSS rule to increase the font size and change its color at desktop size. Duplicate the .myFont class by right-clicking the three vertical dots and choosing duplicate. Then make the following changes…

image

Now if you look at the workspace, you will see the font has grown to 28 pixels and is blue. The newer rule overriding the earlier rule because CSS rules “cascade”… meaning later rules use the same class will override earlier rules.

Now here’s how the magic of media queries works.

Change your workspace screen size to LG. Go to the duplicated .myFont class, click the three vertical dots and choose Add Media Query. Now you should see this…

image

The media query is the orange text. What it’s doing is instructing the website that starting from the width of 992 pixels and going up, the .myFont class shown below the media query will style the Paragraph element. But BELOW 992 pixels, the .myFont class before it with handle the styling. The min(imum)-width that this CSS will affect the element is 992 pixels and up.

Now, if you go to your workspace and change the screen size to MD, you will see the font becomes smaller and turns red. And the font will stay like this at the SM and XS sizes as well. But if you change the screen size to LG, XL or XXL, you will see it gets larger and turns blue.

That’s media queries in a nutshell.

But, there are a LOT more things you can do with them… you can use custom pixel widths, apply them in an opposite manner by using max-width, create ranges under which the media query will be valid (by using min and max), have them valid for screen or print, have them activate if a screen is put into portrait mode, and more.

If, after doing my above exercise, you still aren’t getting how they work, I would recommend looking around on YouTube for some media query tutorials.

Tank you for your help!
I have done it according with your instructions and it works! But I tried on a paragraph inside a container and it doesn’t work!

Hello, I am able to do it now, but the not the way you said(maybe it was in another version). It help me thought! All I have to do is give a class name then on the element. style check the font size to disable and it creates all of the necessary media queries. See screen shoot.


Thank You, again

You are using inline CSS (the rules you see after the word “style” in the Attributes panel). Inline CSS will override the CSS in the stylesheet. You should try to avoid using inline CSS, and move those rules to your custom stylesheet. Also, you can’t use media queries with inline CSS.